.page-owner_management .mng-gap {
  margin-top: 48px;
}
/* ご挨拶 */
/* 見出しと文を白い便箋1枚にまとめる(2026-11-04 たいちが案 b を選んだ) */
.page-owner_management .mng-greeting {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 900px;
  margin-inline: auto;
  padding: 56px 72px 52px;
  background: var(--color-card);
  border-top: 3px solid var(--brand-green);
  box-shadow: 0 18px 40px rgba(20, 21, 22, 0.06);
}
.page-owner_management .mng-greeting .section-title {
  text-align: center;
}
.page-owner_management .mng-greeting .section-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--color-text);
}
.page-owner_management .mng-greeting-text p {
  font-size: 15.5px;
  color: var(--color-text-sub);
  line-height: 2.1;
}
.page-owner_management .mng-greeting-text p + p {
  margin-top: 10px;
}
.page-owner_management .mng-greeting-text .mng-greeting-sign {
  margin-top: 24px;
  text-align: right;
  color: var(--color-text);
  font-weight: 500;
}
.page-owner_management .mng-metric-number {
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: lining-nums;
}
.page-owner_management .mng-metric-unit {
  font-size: 16px;
  font-weight: 500;
}
/* 図の部品を1か所で持つ(画面には出さない) */
.page-owner_management .mng-icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.page-owner_management svg:has(use) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ===== (1) 表紙の横の「このページの流れ」 ===== */
.page-owner_management #plans,
.page-owner_management #strengths,
.page-owner_management #scope,
.page-owner_management #perks,
.page-owner_management #report,
.page-owner_management #flow {
  scroll-margin-top: 110px;
}
.page-owner_management .mng-story-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-owner_management .mng-story a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}
.page-owner_management .mng-story-text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.page-owner_management .mng-story-text small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.6;
}
.page-owner_management .mng-story-title {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
@media (min-width: 1101px) {
  .page-owner_management .page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 56px;
    align-items: end;
  }
  .page-owner_management .page-hero-inner > :not(.mng-story) {
    grid-column: 1;
  }
  .page-owner_management .mng-story {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
  }
}
@media (max-width: 1100px) {
  .page-owner_management .mng-story {
    margin-top: 32px;
    max-width: 520px;
  }
}
/* 下向きの矢羽根を4段に重ねる。最後(ご契約)だけ黄緑 */
.page-owner_management .mng-story-title {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.page-owner_management .mng-story .mng-story-list li + li {
  margin-top: -10px;
}
.page-owner_management .mng-story a {
  padding: 16px 22px 26px;
  background: rgba(20, 21, 22, 0.55);
  backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 50% 14px, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
  transition: background-color 0.25s ease;
}
.page-owner_management .mng-story .mng-story-list li:first-child a {
  padding-top: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
}
.page-owner_management .mng-story .mng-story-list li:nth-child(2) a {
  background: rgba(20, 21, 22, 0.66);
}
.page-owner_management .mng-story .mng-story-list li:nth-child(3) a {
  background: rgba(20, 21, 22, 0.78);
}
.page-owner_management .mng-story .mng-story-list li:last-child a {
  padding-bottom: 16px;
  background: var(--brand-green);
  color: var(--color-text);
  clip-path: polygon(0 0, 50% 14px, 100% 0, 100% 100%, 0 100%);
}
.page-owner_management .mng-story-num {
  flex: none;
  width: 30px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.page-owner_management .mng-story-text small {
  color: rgba(255, 255, 255, 0.78);
}
.page-owner_management .mng-story .mng-story-list li:last-child small {
  color: rgba(20, 20, 20, 0.75);
}
.page-owner_management .mng-story a:hover,
.page-owner_management .mng-story a:focus-visible {
  background: rgba(20, 21, 22, 0.92);
  outline: none;
}
.page-owner_management .mng-story .mng-story-list li:last-child a:hover,
.page-owner_management .mng-story .mng-story-list li:last-child a:focus-visible {
  background: #a4e03a;
}
/* ===== (2) 章と章の分け目の下向き矢印 ===== */
.page-owner_management .mng-next {
  position: relative;
  z-index: 2;
  height: 0;
}
.page-owner_management .mng-next + .section {
  padding-top: calc(var(--section-space) + 44px);
}
.page-owner_management .mng-next-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
}
.page-owner_management .mng-next-label b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 12px;
  letter-spacing: 0;
}
/* 前の章の色が、V の形で次の章へ突き出す */
.page-owner_management .mng-next-mark {
  position: absolute;
  left: 50%;
  top: -1px;
  width: 180px;
  height: 46px;
  transform: translateX(-50%);
  background: var(--color-base);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.page-owner_management .mng-next.is-from-soft .mng-next-mark {
  background: var(--color-soft);
}
.page-owner_management .mng-next.is-from-hero .mng-next-mark {
  background: var(--color-primary);
}
/* 突き出しの中の小さな V */
.page-owner_management .mng-next-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-right: 3px solid var(--brand-green);
  border-bottom: 3px solid var(--brand-green);
  transform: rotate(45deg);
}
.page-owner_management .mng-next-label {
  top: 58px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
}
@media (max-width: 760px) {
  .page-owner_management .mng-next + .section {
    padding-top: calc(var(--section-space) + 64px);
  }
  .page-owner_management .mng-story {
    max-width: none;
  }
}
/* ===== 2つの管理プラン: どんなオーナー様に向くかで分ける ===== */
.page-owner_management #plans .center-lead {
  margin-bottom: 48px;
}
.page-owner_management .mng-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.page-owner_management .mng-fit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 40px 32px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--brand-green);
}
.page-owner_management .mng-fit-badge {
  position: absolute;
  top: -16px;
  left: 40px;
  padding: 4px 16px;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.page-owner_management .mng-fit-head {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.page-owner_management .mng-fit-head b {
  font-size: 24px;
  letter-spacing: 0.06em;
}
.page-owner_management .mng-fit-checks {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.page-owner_management .mng-fit-checks li {
  position: relative;
  padding: 10px 14px 10px 46px;
  background: var(--color-soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
/* 四角の中のチェック */
.page-owner_management .mng-fit-checks li::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 1.5px solid currentColor;
  opacity: 0.6;
}
.page-owner_management .mng-fit-checks li::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 50%;
  width: 6px;
  height: 11px;
  margin-top: -8px;
  border-right: 2.5px solid var(--color-accent);
  border-bottom: 2.5px solid var(--color-accent);
  transform: rotate(45deg);
}
.page-owner_management .mng-fit-answer {
  margin-top: 22px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--brand-green);
  font-size: 15px;
  line-height: 1.9;
}
.page-owner_management .mng-fit-memo {
  margin-top: auto;
  padding-top: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
/* マウスかキーボードで当てたカードだけ、元の黒になって少し浮く。マウスの無い端末では白のまま(2026-11-06 たいち) */
@media (hover: hover) {
  .page-owner_management .mng-fit-card {
    transition:
      background-color 0.25s ease,
      border-color 0.25s ease,
      color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.25s ease;
  }
  .page-owner_management .mng-fit-card:is(:hover, :focus-visible) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    border-top-color: var(--brand-green);
    color: #fff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
    transform: translateY(-6px);
  }
  .page-owner_management .mng-fit-card:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
  }
  .page-owner_management .mng-fit-card:is(:hover, :focus-visible) .mng-fit-head b {
    color: var(--brand-green);
  }
  .page-owner_management .mng-fit-card:is(:hover, :focus-visible) .mng-fit-checks li {
    background: rgba(255, 255, 255, 0.08);
  }
  .page-owner_management .mng-fit-card:is(:hover, :focus-visible) .mng-fit-checks li::before {
    border-color: var(--brand-green);
  }
  .page-owner_management .mng-fit-card:is(:hover, :focus-visible) .mng-fit-memo {
    color: var(--color-dark-text-sub);
  }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .page-owner_management .mng-fit-card {
    transition: none;
  }
  .page-owner_management .mng-fit-card:is(:hover, :focus-visible) {
    transform: none;
  }
}
.page-owner_management .mng-fit-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 28px;
  font-size: 15px;
}
@media (max-width: 900px) {
  .page-owner_management .mng-fit {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}
@media (max-width: 760px) {
  .page-owner_management .mng-fit-card {
    padding: 32px 22px 24px;
  }
  .page-owner_management .mng-fit-badge {
    left: 22px;
  }
  .page-owner_management .mng-fit-head b {
    font-size: 20px;
  }
  .page-owner_management .mng-fit-checks li {
    font-size: 14px;
  }
}
/* ===== (4) 2つのプランのしくみ(図解) =====
   スマホは縦の流れが土台。PC(761px 以上)は 人 → ネハヤス → 人 を横一列にする */
.page-owner_management .mng-zu-title {
  margin-top: 80px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.page-owner_management .mng-zu-lead {
  margin: 8px 0 28px;
  text-align: center;
  font-size: 14.5px;
  color: var(--color-text-sub);
}
.page-owner_management .mng-zu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.page-owner_management .mng-zu-card {
  margin: 0;
  padding: 22px 16px 18px;
  background: var(--color-soft);
  border-top: 4px solid var(--color-line-strong);
}
.page-owner_management .mng-zu-card.is-sublease {
  border-top-color: var(--brand-green);
}
.page-owner_management .mng-zu-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 22px;
}
.page-owner_management .mng-zu-tag {
  padding: 4px 12px;
  border: 1px solid var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.page-owner_management .is-sublease .mng-zu-tag {
  background: var(--color-primary);
  color: #fff;
}
.page-owner_management .mng-zu-head b {
  font-size: 17px;
  letter-spacing: 0.05em;
}
.page-owner_management .mng-zu-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.page-owner_management .mng-zu-party {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
}
.page-owner_management .mng-zu-icon {
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  padding: 11px;
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--color-primary);
}
.page-owner_management .mng-zu-party b {
  align-self: end;
  font-size: 15.5px;
  letter-spacing: 0.06em;
}
.page-owner_management .mng-zu-party small {
  align-self: start;
  font-size: 12.5px;
  color: var(--color-text-sub);
}
/* ネハヤス不動産は会社のロゴで見せる */
.page-owner_management .mng-zu-party.is-company {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 8px;
  padding: 18px 16px 14px;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.page-owner_management .mng-zu-logo {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.page-owner_management .mng-zu-logo img:first-child {
  width: 64px;
  height: auto;
}
.page-owner_management .mng-zu-logo img:last-child {
  width: 112px;
  height: auto;
}
.page-owner_management .mng-zu-party.is-company small {
  color: var(--color-dark-text-sub);
}
.page-owner_management .mng-zu-link {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 0 42px;
}
/* 幅420までの狭い画面は、左右に並べると欄が狭すぎて1〜2字ずつ折れる(家賃の流れ・管理委託契約など)。
   お金と契約を上下に積み、1行で読めるようにする(2026-11-09 たいち「いろんな携帯で文字崩れないように」) */
@media (max-width: 420px) {
  .page-owner_management .mng-zu-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}
.page-owner_management .mng-zu-link p {
  position: relative;
  display: flex;
  /* 印と文字が並びきらない時は文字を次の行へ。文字が中身の一番狭い幅(1字)まで縮んで縦に並ぶのを防ぐ(Safari)。
     幅320で「管理委託契約」が欄より長い時は、その途中でも折る */
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 6px;
  min-height: 58px;
  padding: 8px 0 8px 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.page-owner_management .mng-zu-link svg {
  flex: none;
  width: 22px;
  height: 22px;
}
.page-owner_management .mng-zu-money svg {
  color: #5c8a0c;
}
.page-owner_management .mng-zu-link .mng-zu-contract {
  color: var(--color-text-sub);
}
/* スマホは幅が足りないので、契約の書類アイコンは PC だけ */
.page-owner_management .mng-zu-contract svg {
  display: none;
}
.page-owner_management .mng-zu-link .mng-zu-contract.is-empty {
  visibility: hidden;
}
/* お金: 黄緑の太い矢印 / 契約: 点線 */
.page-owner_management .mng-zu-link .mng-zu-money::before,
.page-owner_management .mng-zu-link .mng-zu-contract::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}
.page-owner_management .mng-zu-link .mng-zu-money::before {
  bottom: 6px;
  width: 3px;
  background: var(--brand-green);
}
.page-owner_management .mng-zu-link .mng-zu-money::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: 2px;
  width: 11px;
  height: 11px;
  border-right: 3px solid var(--brand-green);
  border-bottom: 3px solid var(--brand-green);
  transform: rotate(45deg);
}
.page-owner_management .mng-zu-link .mng-zu-contract::before {
  bottom: 0;
  border-left: 2px dashed var(--color-line-strong);
}
.page-owner_management .mng-zu-span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1.5px dashed var(--color-line-strong);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
}
.page-owner_management .mng-zu-span svg {
  flex: none;
  width: 20px;
  height: 20px;
}
/* 下の段: 受け取る家賃の棒と、空室のときの説明 */
.page-owner_management .mng-zu-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}
/* 受け取る家賃: 3か月を数字で並べる(2026-11-07 たいち「数字とか使ってわかりやすく」) */
.page-owner_management .mng-zu-example {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.page-owner_management .mng-zu-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.page-owner_management .mng-zu-months li {
  padding: 10px 4px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background: var(--color-accent);
}
.page-owner_management .mng-zu-months b {
  display: block;
  margin-top: 2px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}
.page-owner_management .mng-zu-months b span {
  margin-left: 2px;
  font-size: 13px;
}
.page-owner_management .mng-zu-months.is-fixed li {
  color: var(--color-text);
  background: var(--brand-green);
}
@media (max-width: 760px) {
  .page-owner_management .mng-zu-months {
    gap: 6px;
  }
  .page-owner_management .mng-zu-months li {
    padding-inline: 0;
    /* 一番狭いスマホでも「空室が出た月」が枠に収まる大きさ */
    font-size: 11.5px;
  }
  .page-owner_management .mng-zu-months b {
    font-size: 26px;
  }
}
/* 空室で入らない月は、枠だけにして「無い」ことを見せる */
.page-owner_management .mng-zu-months.is-varies li.is-vacant {
  color: var(--color-text);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
}
@media (min-width: 761px) {
  .page-owner_management .mng-zu-card {
    padding: 32px 40px 28px;
  }
  .page-owner_management .mng-zu-flow {
    grid-template-columns: 1fr 1.45fr 1fr 1.45fr 1fr;
    align-items: center;
    column-gap: 14px;
  }
  .page-owner_management .mng-zu-party {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 4px;
    align-self: stretch;
    align-content: center;
    padding: 20px 10px 16px;
    text-align: center;
  }
  .page-owner_management .mng-zu-icon {
    grid-row: auto;
    width: 72px;
    height: 72px;
    padding: 15px;
    margin-bottom: 6px;
  }
  .page-owner_management .mng-zu-logo {
    margin-bottom: 4px;
  }
  .page-owner_management .mng-zu-logo img:first-child {
    width: 76px;
  }
  .page-owner_management .mng-zu-logo img:last-child {
    width: 128px;
  }
  .page-owner_management .mng-zu-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0;
  }
  .page-owner_management .mng-zu-contract svg {
    display: block;
  }
  .page-owner_management .mng-zu-link p {
    justify-content: center;
    min-height: 0;
    padding: 0 6px 12px;
    text-align: center;
  }
  .page-owner_management .mng-zu-link .mng-zu-money::before,
  .page-owner_management .mng-zu-link .mng-zu-contract::before {
    top: auto;
    bottom: 0;
    right: 6px;
  }
  .page-owner_management .mng-zu-link .mng-zu-money::before {
    width: auto;
    height: 3px;
  }
  .page-owner_management .mng-zu-link .mng-zu-money::after {
    left: auto;
    right: 2px;
    bottom: -4px;
    transform: rotate(-45deg);
  }
  .page-owner_management .mng-zu-link .mng-zu-contract::before {
    right: 0;
    border-left: 0;
    border-top: 2px dashed var(--color-line-strong);
  }
  /* 集金代行: ご入居者様とオーナー様をつなぐ契約のかっこ */
  .page-owner_management .mng-zu-span {
    grid-column: 1 / -1;
    justify-content: center;
    margin: 0 8.5%;
    padding: 34px 0 0;
    border: 0;
  }
  .page-owner_management .mng-zu-span::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22px;
    border: 2px dashed var(--color-line-strong);
    border-top: 0;
  }
  .page-owner_management .mng-zu-span.is-note {
    padding-top: 18px;
  }
  .page-owner_management .mng-zu-span.is-note::before {
    display: none;
  }
  .page-owner_management .mng-zu-result {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
    margin-top: 20px;
  }
}
@media (max-width: 760px) {
  .page-owner_management .mng-zu-title {
    margin-top: 56px;
    font-size: 19px;
  }
}
.page-owner_management .mng-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--color-text-sub);
}
/* 管理業務の流れ */
.page-owner_management .mng-cycle .dot-list li {
  font-size: 14.5px;
}
.page-owner_management .mng-cycle .info-card.is-dark .dot-list li {
  color: var(--color-dark-text-sub);
}
.page-owner_management .mng-cycle .info-card.is-dark .dot-list li::before {
  background: var(--color-dark-text-sub);
}
/* 5段のフロー図: 03(ご提案)を黒にして判断の場所を示す */
@media (min-width: 1101px) {
  .page-owner_management .mng-flow .flow-list {
    grid-template-columns: repeat(5, 1fr);
  }
}
.page-owner_management .mng-flow .flow-step:nth-child(1) .flow-body {
  background: var(--color-base);
}
.page-owner_management .mng-flow .flow-step:nth-child(2) .flow-body {
  background: var(--color-sand);
}
.page-owner_management .mng-flow .flow-step:nth-child(3) .flow-body {
  background: var(--color-primary);
  color: var(--color-base);
}
.page-owner_management .mng-flow .flow-step:nth-child(4) .flow-body {
  background: var(--color-sand);
  color: var(--color-text);
}
.page-owner_management .mng-flow .flow-step:nth-child(4) .flow-body p {
  color: var(--color-text-sub);
}
.page-owner_management .mng-flow .flow-step:nth-child(5) .flow-body {
  background: var(--color-base);
}
/* よくある質問は白地(上の流れがグレーのため) */
.page-owner_management .mng-faq {
  background: var(--color-base);
}
.page-owner_management .page-cta-tel {
  margin-block: 4px;
}
@media (max-width: 1100px) {
  .page-owner_management .mng-flow .flow-step:nth-child(4) {
    z-index: 1;
  }
}
@media (max-width: 760px) {
  .page-owner_management .mng-gap {
    margin-top: 36px;
  }
  .page-owner_management .mng-greeting {
    gap: 18px;
    padding: 32px 22px;
  }
  .page-owner_management .mng-greeting-text p {
    font-size: 14.5px;
    text-align: left;
  }
  .page-owner_management .mng-metric-number {
    font-size: 40px;
  }
}
/* 5段にすると1段が狭いので、説明の文字を少し小さくする */
.page-owner_management .mng-flow {
  margin-top: 36px;
}
.page-owner_management .mng-flow .flow-body p {
  text-align: left;
  font-size: 14px;
}
/* 5段は1段が狭く、説明が「管理委託契約を/結びます。」と3行に割れる。矢印の外側の余白を詰めて文の幅を広げ、
   行の長さをそろえる(2026-11-04)
   5段の流れ図は管理と切り替えの2ページだけ。どちらかの段数が変わっても他方に響かないよう、ページごとに書く */
@media (min-width: 1101px) {
  .page-owner_management .mng-flow .flow-body {
    padding-right: calc(var(--flow-arrow) + 10px);
  }
  .page-owner_management .mng-flow .flow-step:not(:first-child) .flow-body {
    padding-left: calc(var(--flow-arrow) + 12px);
  }
  .page-owner_management .mng-flow .flow-body p {
    letter-spacing: 0.02em;
    text-wrap: balance;
  }
}
/* ===== オーナー様への7つの特典: 写真のカード(2026-10-28) =====
   上段4枚・下段3枚。写真の下側を暗くして、番号・特典名を白い文字で重ねる */
/* 特典の7枚: 白い隙間を空けず、濃い1pxの線で区切る(外まわりも同じ線。2026-11-04 たいちが見本Aを選んだ) */
.page-owner_management .perk-cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  padding: 1px;
  background: var(--color-primary-dark);
}
.page-owner_management .perk-card {
  position: relative;
  grid-column: span 3;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
}
.page-owner_management .perk-card:nth-child(n + 5) {
  grid-column: span 4;
  aspect-ratio: 16 / 11;
}
.page-owner_management .perk-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.page-owner_management .perk-card:hover img {
  transform: scale(1.04);
}
.page-owner_management .perk-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 21, 22, 0) 35%, rgba(20, 21, 22, 0.78) 100%);
}
.page-owner_management .perk-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 22px 24px 24px;
}
.page-owner_management .perk-card-no {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.page-owner_management .perk-card-no::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}
.page-owner_management .perk-card h4 {
  margin-top: 12px;
  word-break: auto-phrase;
}
@media (max-width: 1100px) {
  .page-owner_management .perk-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-owner_management .perk-card,
  .page-owner_management .perk-card:nth-child(n + 5) {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
  .page-owner_management .perk-card:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 7;
  }
}
@media (max-width: 760px) {
  .page-owner_management .perk-card-body {
    padding: 14px 14px 16px;
  }
  .page-owner_management .perk-card-no {
    font-size: 20px;
  }
  .page-owner_management .perk-card h4 {
    font-size: 15px;
    margin-top: 8px;
  }
}
/* 特典名は <wbr> の位置でだけ折り返す */
.page-owner_management .perk-card h4 {
  word-break: keep-all;
  letter-spacing: 0.06em;
}
@media (max-width: 760px) {
  .page-owner_management .perk-card h4 {
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.45;
  }
  .page-owner_management .perk-card-no {
    font-size: 18px;
  }
  .page-owner_management .perk-card-no::after {
    width: 18px;
  }
}
/* 特典名の書体はページ内の他のカード(写真付きカードの題名)と同じゴシック・太字にそろえる。番号もゴシック */
.page-owner_management .perk-card h4 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.page-owner_management .perk-card-no {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.page-owner_management .perk-card-no::after {
  width: 20px;
}
@media (max-width: 760px) {
  .page-owner_management .perk-card h4 {
    font-size: 14px;
    letter-spacing: 0.02em;
  }
  .page-owner_management .perk-card-no {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
}
/* 契約前の確認事項のアイコン: 案を選ぶまでは隠しておき、案の中で出す */
.page-owner_management .mng-report-icon {
  display: none;
}
.page-owner_management .mng-report-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* スマホは写真が左・文が右の横長カード(style.css)。写真の比率の指定を外す */
@media (max-width: 760px) {
}
/* =====================================================================
   (4) サブリースの4つのポイント・管理業務の流れ・ご契約までの流れ(ページ全体の組み合わせ) page
   オーナー様が知りたい順に見せる: 「空室でも家賃は入るか」「ずっと任せられるか」「どこで決めればいいか」
   ===================================================================== */
/* ご契約までの流れ(どちらの案も共通): 上に「ご契約前のご検討」「ご契約後」の区切りを付け、どこで決めるかを見せる */
html .page-owner_management .mng-flow-phases {
  grid-template-columns: 3fr 2fr;
  margin-bottom: 18px;
}
html .page-owner_management .mng-flow-phases .flow-phase:first-child::after {
  background: var(--brand-green);
  height: 2px;
}
html .page-owner_management .mng-flow .flow-pin {
  background: var(--brand-green);
  color: var(--color-text);
}
html .page-owner_management .mng-flow .flow-pin::before,
html .page-owner_management .mng-flow .flow-pin::after {
  background: var(--brand-green);
}
/* 「約束を先に見せる」(2026-11-06 たいちが選んだ) */
/* サブリースの4つのポイント: 01〜04を同じ大きさで左から順に並べる(どれかを特別扱いしない。2026-11-06 たいち) */
html .page-owner_management .mng-points .info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px 30px;
}
html .page-owner_management .mng-points .num {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--brand-green);
  font-size: 28px;
  color: var(--color-text);
}
html .page-owner_management .mng-points h3 {
  margin-bottom: 8px;
}
@media (min-width: 1101px) {
  /* 見出しが1行でも2行でも、下の説明文の高さをそろえる */
  html .page-owner_management .mng-points h3 {
    min-height: 3.2em;
  }
}
/* 管理業務の流れ: 4つを輪に並べ、退去の次は募集へ戻ることを見せる */
html .page-owner_management .mng-cycle {
  --cycle-gap-x: 200px;
  --cycle-gap-y: 64px;
  --cycle-arrow: 40px;
  position: relative;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--cycle-gap-x);
  row-gap: var(--cycle-gap-y);
  max-width: 1040px;
  margin-inline: auto;
}
html .page-owner_management .mng-cycle .info-card {
  position: relative;
  padding: 28px 30px 30px;
  background: var(--color-card);
  border: 0;
  border-top: 3px solid var(--color-primary);
  color: var(--color-text);
  box-shadow: 0 12px 30px rgba(20, 21, 22, 0.06);
}
html .page-owner_management .mng-cycle .info-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}
html .page-owner_management .mng-cycle .info-card:nth-child(4) {
  grid-column: 1;
  grid-row: 2;
}
html .page-owner_management .mng-cycle .num {
  display: inline-block;
  margin: 0 12px 0 0;
  font-size: 26px;
  color: var(--color-text);
  vertical-align: -2px;
}
html .page-owner_management .mng-cycle h3 {
  display: inline-block;
  margin-bottom: 14px;
}
html .page-owner_management .mng-cycle .info-card.is-dark .dot-list li {
  color: inherit;
}
html .page-owner_management .mng-cycle .info-card.is-dark .dot-list li::before {
  background: var(--color-accent);
}
/* 札の間の矢印(時計回り) */
html .page-owner_management .mng-cycle .info-card::after {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--cycle-arrow);
  height: var(--cycle-arrow);
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: calc(var(--cycle-arrow) * 0.45);
  font-weight: 700;
}
html .page-owner_management .mng-cycle .info-card:nth-child(1)::after {
  content: "→";
  top: calc(50% - var(--cycle-arrow) / 2);
  right: calc((var(--cycle-gap-x) + var(--cycle-arrow)) / -2);
}
html .page-owner_management .mng-cycle .info-card:nth-child(2)::after {
  content: "↓";
  bottom: calc((var(--cycle-gap-y) + var(--cycle-arrow)) / -2);
  left: calc(50% - var(--cycle-arrow) / 2);
}
html .page-owner_management .mng-cycle .info-card:nth-child(3)::after {
  content: "←";
  top: calc(50% - var(--cycle-arrow) / 2);
  left: calc((var(--cycle-gap-x) + var(--cycle-arrow)) / -2);
}
html .page-owner_management .mng-cycle .info-card:nth-child(4)::after {
  content: "↑";
  top: calc((var(--cycle-gap-y) + var(--cycle-arrow)) / -2);
  left: calc(50% - var(--cycle-arrow) / 2);
}
/* 輪の真ん中 */
html .page-owner_management .mng-cycle::before {
  content: "退去の次は\A次の募集へ";
  padding-top: 34px;
  white-space: pre;
  position: absolute;
  top: calc(50% - 74px);
  left: calc(50% - 74px);
  display: grid;
  place-items: center;
  align-content: center;
  width: 148px;
  height: 148px;
  border: 2px dashed var(--color-line-strong);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text);
}
html .page-owner_management .mng-cycle::after {
  content: "↻";
  position: absolute;
  top: calc(50% - 46px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-green);
}
@media (max-width: 1100px) {
  /* 狭い画面も縦1列に積まず、2×2の輪のまま間を詰める(2026-11-08 たいち「サイクル感がわかりづらい」)。真ん中の丸は入らないので、下に「次の募集へ戻る」を付ける */
  html .page-owner_management .mng-cycle {
    --cycle-gap-x: 72px;
    --cycle-gap-y: 56px;
  }
  html .page-owner_management .mng-cycle::after {
    display: none;
  }
  html .page-owner_management .mng-cycle::before {
    content: "退去の次は、また 01 入居者募集へ";
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
    width: auto;
    height: auto;
    padding: 14px;
    border-radius: 999px;
    white-space: normal;
  }
}
@media (max-width: 760px) {
  html .page-owner_management .mng-points .info-card {
    padding: 22px 20px 24px;
  }
  html .page-owner_management .mng-points .num {
    margin-bottom: 12px;
    font-size: 24px;
  }
  /* スマホ: 札を小さくして2×2に収める */
  html .page-owner_management .mng-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --cycle-gap-x: 30px;
    --cycle-gap-y: 40px;
    --cycle-arrow: 26px;
  }
  html .page-owner_management .mng-cycle .info-card {
    padding: 14px 10px 16px 12px;
  }
  html .page-owner_management .mng-cycle .num {
    display: block;
    margin: 0 0 2px;
    font-size: 18px;
  }
  html .page-owner_management .mng-cycle h3 {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
  }
  html .page-owner_management .mng-cycle .dot-list {
    gap: 4px;
  }
  html .page-owner_management .mng-cycle .dot-list li {
    padding-left: 12px;
    font-size: 13px;
    line-height: 1.6;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
  html .page-owner_management .mng-cycle .dot-list li::before {
    left: 1px;
    width: 5px;
    height: 5px;
  }
  html .page-owner_management .mng-cycle::before {
    padding: 10px 12px;
    font-size: 13px;
  }
}
/* =====================================================================
   (6) オーナー様への7つの特典 perks
   ===================================================================== */
/* 「宅配BOX設置 ─ 1棟物件に限ります」: 注記を題と同じ行に並べ、この札だけ背が高くならないようにする */
@media (max-width: 400px) {
  /* 狭い画面では注記を折り返す(下の元の指定より強くするため :root を付ける) */
  :root .page-owner_management .perk-card h4 .perk-card-note {
    white-space: normal;
  }
}
html .page-owner_management .perk-card h4 .perk-card-note {
  display: inline;
  margin: 0 0 0 0.4em;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* --- 写真の下に濃い帯を敷き、その上に文字 --- */
html .page-owner_management .perk-card::after {
  display: none;
}
html .page-owner_management .perk-card-body {
  padding: 16px 22px 18px;
  background: rgba(31, 32, 32, 0.92);
  border-top: 3px solid var(--brand-green);
}
html .page-owner_management .perk-card-no {
  color: var(--brand-green);
}
html .page-owner_management .perk-card-no::after {
  background: var(--brand-green);
}
html .page-owner_management .perk-card h4 {
  margin-top: 6px;
}
@media (max-width: 760px) {
  html .page-owner_management .perk-card-body {
    padding: 10px 12px 12px;
  }
}
/* =====================================================================
   (7) 契約前の確認事項 report(丸い絵記号と書類の形。2026-11-06 たいちが選んだ)
   ===================================================================== */
.page-owner_management .mng-report {
  counter-reset: report;
}
.page-owner_management .mng-report .info-card {
  counter-increment: report;
}
/* 書類の形(右上を折った札)は両案で共通 */
html .page-owner_management .mng-report {
  gap: 28px;
}
html .page-owner_management .mng-report .info-card {
  position: relative;
  background: var(--color-soft);
  border: 0;
  border-top: 4px solid var(--color-primary);
  color: var(--color-text);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
html .page-owner_management .mng-report .info-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(225deg, transparent 50%, var(--color-line-strong) 50%);
}
html .page-owner_management .mng-report .info-card p:not(.num) {
  color: var(--color-text-sub);
}
/* 濃い丸の絵記号に、黄緑の番号の札 */
html .page-owner_management .mng-report-icon {
  position: relative;
  display: block;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
html .page-owner_management .mng-report-icon::after {
  content: counter(report, decimal-leading-zero);
  position: absolute;
  top: -4px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 11.5px;
  font-weight: 700;
}
html .page-owner_management .mng-report h3 {
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--brand-green);
}
/* --- 絵記号を左上に。題と説明は左揃え --- */
html .page-owner_management .mng-report .info-card {
  padding: 30px 30px 32px;
}
html .page-owner_management .mng-report-icon {
  width: 64px;
  height: 64px;
  padding: 17px;
  margin-bottom: 20px;
}
@media (max-width: 760px) {
  html .page-owner_management .mng-report {
    gap: 18px;
  }
  html .page-owner_management .mng-report .info-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    padding: 24px 20px 26px;
  }
  html .page-owner_management .mng-report-icon {
    grid-row: span 2;
    width: 56px;
    height: 56px;
    padding: 15px;
    margin: 0;
  }
  html .page-owner_management .mng-report h3 {
    justify-self: start;
  }
}

/* ===== 2026-11-06 オーナー様の目線の構成に組み替えた分 ===== */

/* 章へ飛んだときに、上の帯に隠れない */
.page-owner_management #strengths,
.page-owner_management #perks,
.page-owner_management #flow {
  scroll-margin-top: 110px;
}

/* 表紙の実績の数字 */
.page-owner_management .mng-hero-metrics {
  display: flex;
  margin-top: 24px;
}
.page-owner_management .mng-hero-metrics > div {
  padding-inline: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.page-owner_management .mng-hero-metrics > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.page-owner_management .mng-hero-metrics dt {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
}
.page-owner_management .mng-hero-metrics dd {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #fff;
}
.page-owner_management .mng-metric-number {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}
.page-owner_management .mng-metric-unit {
  font-size: 15px;
  font-weight: 500;
}
.page-owner_management .mng-hero-metrics + .page-hero-actions {
  margin-top: 24px;
}
@media (max-width: 760px) {
  .page-owner_management .mng-hero-metrics {
    justify-content: space-between;
    margin-top: 18px;
  }
  .page-owner_management .mng-hero-metrics > div {
    padding-inline: 14px;
  }
  .page-owner_management .mng-hero-metrics > div:last-child {
    padding-right: 0;
  }
  .page-owner_management .mng-hero-metrics dt {
    font-size: 11.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .page-owner_management .mng-metric-number {
    font-size: 30px;
  }
  .page-owner_management .mng-metric-unit {
    font-size: 13px;
  }
}

/* 表紙の「このページの流れ」は4段(2026-11-13 特典の章を消した後)。4段目は最後の黄緑の段なので、濃さの指定を足さない
   (5段の頃の「4段目を暗くする」指定が残ると、04 が暗い背景に黒い字になって読めない。たいち「透明になってるとこある」) */
.page-owner_management .mng-story a {
  padding-block: 12px 22px;
}

/* 右端に残る目次(owner_management.js が作る)。表紙の「このページの流れ」をそのまま小さくした下向きの矢羽根。
   今の章だけ黄緑。本文の右の余白(幅1280pxで32px)に収まる幅にし、名前はマウスかキーボードで当てた時に開く。
   画面が広く余白が足りる時は、名前まで出したまま置く */
.page-owner_management .mng-rail {
  --rail-size: 28px;
  --rail-notch: 5px;
  position: fixed;
  z-index: 40;
  /* ヘッダーとその下の濃い帯(page-pin.css)のすぐ下、右上に置く(2026-11-07 たいち) */
  top: calc(var(--header-height) + 1px + var(--page-pin-height) + 12px);
  right: 2px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s;
}
.page-owner_management .mng-rail.is-shown {
  opacity: 1;
  visibility: visible;
}
.page-owner_management .mng-rail-title {
  display: none;
}
.page-owner_management .mng-rail ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-owner_management .mng-rail li + li {
  margin-top: calc(var(--rail-notch) * -1 + 1px);
}
.page-owner_management .mng-rail a {
  display: flex;
  align-items: center;
  padding-block: 8px calc(8px + var(--rail-notch));
  background: rgba(20, 21, 22, 0.7);
  backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;
  clip-path: polygon(
    0 0,
    50% var(--rail-notch),
    100% 0,
    100% calc(100% - var(--rail-notch)),
    50% 100%,
    0 calc(100% - var(--rail-notch))
  );
  transition: background-color 0.25s ease;
}
.page-owner_management .mng-rail li:nth-child(2) a {
  background: rgba(20, 21, 22, 0.76);
}
.page-owner_management .mng-rail li:nth-child(3) a {
  background: rgba(20, 21, 22, 0.82);
}
.page-owner_management .mng-rail li:nth-child(4) a {
  background: rgba(20, 21, 22, 0.88);
}
.page-owner_management .mng-rail li:nth-child(5) a {
  background: rgba(20, 21, 22, 0.94);
}
.page-owner_management .mng-rail li:first-child a {
  padding-top: 6px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--rail-notch)),
    50% 100%,
    0 calc(100% - var(--rail-notch))
  );
}
.page-owner_management .mng-rail li:last-child a {
  padding-bottom: 6px;
  clip-path: polygon(0 0, 50% var(--rail-notch), 100% 0, 100% 100%, 0 100%);
}
.page-owner_management .mng-rail .mng-story-num {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--rail-size);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.page-owner_management .mng-rail small {
  display: none;
}
.page-owner_management .mng-rail .mng-story-text {
  display: block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.25s ease;
}
.page-owner_management .mng-rail .mng-story-text b {
  display: block;
  padding-right: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
/* 当てている間は下の本文が透けないよう、濃くする */
.page-owner_management .mng-rail:is(:hover, :focus-within) li a:not(.is-current) {
  background: rgba(20, 21, 22, 0.94);
}
.page-owner_management .mng-rail:is(:hover, :focus-within) .mng-story-text {
  max-width: 180px;
}
.page-owner_management .mng-rail li a:is(:hover, :focus-visible):not(.is-current) {
  background: var(--color-primary-dark);
}
.page-owner_management .mng-rail a:focus-visible {
  outline: none;
}
.page-owner_management .mng-rail a:focus-visible .mng-story-num {
  text-decoration: underline;
}
.page-owner_management .mng-rail li a.is-current {
  background: var(--brand-green);
  color: var(--color-text);
}
/* 余白が足りる広い画面: 表紙と同じく名前まで出す(名前まで出した幅は約150px) */
@media (min-width: 1560px) {
  .page-owner_management .mng-rail {
    --rail-notch: 8px;
  }
  .page-owner_management .mng-rail-title {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-sub);
  }
  .page-owner_management .mng-rail .mng-story-text {
    max-width: 180px;
  }
}
/* スマホ: 左右の余白(20px)に収まる大きさ */
@media (max-width: 760px) {
  .page-owner_management .mng-rail {
    --rail-size: 18px;
    --rail-notch: 3px;
    right: 1px;
  }
  .page-owner_management .mng-rail a {
    padding-block: 5px calc(5px + var(--rail-notch));
  }
  .page-owner_management .mng-rail li:first-child a {
    padding-top: 4px;
  }
  .page-owner_management .mng-rail li:last-child a {
    padding-bottom: 4px;
  }
  .page-owner_management .mng-rail .mng-story-num {
    font-size: 10px;
  }
  .page-owner_management .mng-rail:is(:hover, :focus-within) .mng-story-text {
    max-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-owner_management .mng-rail,
  .page-owner_management .mng-rail a,
  .page-owner_management .mng-rail .mng-story-text {
    transition: none;
  }
}

/* 2 お任せできる業務の6枚と管理業務の流れを、ひと続きに見せる */
.page-owner_management #strengths {
  padding-bottom: 0;
}
.page-owner_management #strengths + #scope {
  padding-top: 72px;
}

/* しくみの見出し: プラン名を大きく、何の話かがひと目で分かるように */
.page-owner_management .mng-zu-head {
  display: block;
  margin-bottom: 26px;
}
.page-owner_management .mng-zu-head .mng-zu-tag {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.page-owner_management .mng-zu-head b {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-sub);
}
.page-owner_management .mng-zu + .sub-heading,
.page-owner_management .mng-zu-card + .mng-zu-card {
  margin-top: 0;
}
@media (max-width: 760px) {
  .page-owner_management .mng-zu-head .mng-zu-tag {
    font-size: 21px;
  }
  .page-owner_management .mng-zu-head b {
    font-size: 15px;
  }
}

/* 契約前の確認事項: 絵記号+題+「何を確かめるのか」の問い+確かめる項目、の順に読ませる */
html .page-owner_management .mng-report .info-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
  background: var(--color-card);
}
html .page-owner_management .mng-report .mng-report-icon {
  grid-row: span 2;
  margin: 0;
}
html .page-owner_management .mng-report h3 {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 1.5;
}
html .page-owner_management .mng-report .info-card p.mng-report-q {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-sub);
}
html .page-owner_management .mng-report .dot-list {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 3px solid var(--brand-green);
}
@media (max-width: 760px) {
  html .page-owner_management .mng-report .info-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }
}

/* ご契約までの流れは白地の章になったので、白い矢羽根を薄いグレーに */
.page-owner_management .section-flow {
  background: var(--color-base);
}
html .page-owner_management .mng-flow .flow-step:nth-child(1) .flow-body,
html .page-owner_management .mng-flow .flow-step:nth-child(5) .flow-body {
  background: var(--color-soft);
}

/* よくある質問とご挨拶はグレーの地で続ける。ご挨拶の文「お任せください」から、最後の相談へつなぐ */
.page-owner_management .mng-faq {
  background: var(--color-soft);
  padding-bottom: 0;
}
.page-owner_management .mng-faq + #greeting {
  padding-top: 72px;
}

/* 最後の相談: ボタンを上に並べ、電話番号は線で区切って下に置く */
.page-owner_management .page-cta-actions {
  gap: 12px;
}
.page-owner_management .page-cta-tel {
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

/* スマホの特典: 文字の帯で写真が隠れないよう、札を縦長にする */
@media (max-width: 760px) {
  html .page-owner_management .perk-card,
  html .page-owner_management .perk-card:nth-child(n + 5) {
    aspect-ratio: 3 / 4;
  }
  html .page-owner_management .perk-card:last-child {
    aspect-ratio: 16 / 10;
  }
}

/* 縦に並ぶ流れ図: 03 の矢羽根の先が「ここで判断いただけます」の札に重ならないようにする */
@media (max-width: 1100px) {
  html .page-owner_management .mng-flow .flow-step-decide .flow-body {
    margin-bottom: 0;
  }
  html .page-owner_management .mng-flow .flow-pin {
    margin-block: 8px;
  }
}

/* 際立たせる文字は明朝(決まりは style.css の :root) */
.page-owner_management .mng-zu-title,
.page-owner_management .mng-zu-head .mng-zu-tag,
.page-owner_management .mng-fit-head b,
html .page-owner_management .mng-points h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
}

/* タブレット幅: 家賃の図と文を横に並べると「空室が出た月」が折り返すので、縦に積む */
@media (max-width: 900px) {
  .page-owner_management .mng-zu-result {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 右端の目次: 今の章だけ黄緑で手前へ。他の章は少し透かして下げる(2026-11-06 たいち) */
.page-owner_management .mng-rail li {
  position: relative;
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}
.page-owner_management .mng-rail li a:not(.is-current),
.page-owner_management .mng-rail li:nth-child(n) a:not(.is-current) {
  background: rgba(20, 21, 22, 0.5);
}
.page-owner_management .mng-rail li:has(a.is-current) {
  z-index: 1;
  transform: translateX(-10px) scale(1.08);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
.page-owner_management .mng-rail li a.is-current {
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .page-owner_management .mng-rail li {
    transition: none;
  }
}

/* プランの説明へ飛んだ時、上の帯に隠れないようにする */
.page-owner_management .mng-fit-card {
  scroll-margin-top: 64px;
}
/* 受け取る家賃: 図と文を1つの枠にまとめる(2026-11-06 たいち) */
.page-owner_management .mng-zu-result {
  display: block;
  margin-top: 16px;
  padding: 20px 24px;
  background: var(--color-card);
}
.page-owner_management .is-sublease .mng-zu-result {
  outline: 2px solid var(--brand-green);
  outline-offset: -2px;
}
/* 図の答え: オーナー様から見た利点を一言で(2026-11-08 たいち「オーナー様から見てメリットを分かりやすく」) */
.page-owner_management .mng-zu-result-kicker {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
}
.page-owner_management .mng-zu-result-title {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}
.page-owner_management .mng-zu-result-title + .mng-zu-result-text {
  margin: 6px 0 14px;
}
.page-owner_management .mng-zu-for {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
}
.page-owner_management .mng-zu-for > p {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.page-owner_management .mng-zu-for .dot-list li {
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 760px) {
  .page-owner_management .mng-zu-result-title {
    font-size: 19px;
  }
}
.page-owner_management .mng-zu-result-text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
}
.page-owner_management .mng-zu-result small {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-sub);
}

/* 表紙: 夕暮れの建物の写真。章の一覧は帯の右に置く(2026-11-07 たいち「それ戻して」)。右に置く幅が無い画面は右端の目次だけにする */
.page-owner_management .page-hero-photo img {
  object-position: 50% 45%;
}
.page-owner_management .page-hero-photo::after {
  background: linear-gradient(
    90deg,
    rgba(14, 16, 18, 0.72) 0%,
    rgba(14, 16, 18, 0.46) 42%,
    rgba(14, 16, 18, 0) 70%
  );
}
@media (max-width: 1100px) {
  .page-owner_management .mng-story {
    display: none;
  }
}
.page-owner_management .page-hero-inner {
  padding: 56px 0 32px;
}
/* 一番推すページの題: 黄緑のロゴ+大きな文字で、他のページの題と差をつける(2026-11-07 たいち)。書体はサイトの明朝のまま(たいち確定) */
.page-owner_management .mng-hero-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  /* 題全体を帯の左半分の手前に収める(2026-11-08 たいちの赤枠) */
  font-size: clamp(32px, 3vw, 43px);
  line-height: 1.3;
  letter-spacing: 0.04em;
}
/* 題は「ネハヤス管理サービス」の1つの言葉。字の大きさ・書体・色をそろえ、黄緑の葉の印は前に置く(2026-11-13 たいち「ネハヤス管理サービスにしたいな。だから文字サイズとか統一して」)。
   ネハヤスと管理サービスはそれぞれ中で折らず、狭い幅ではその間でだけ折る */
.page-owner_management .mng-hero-mark {
  display: inline-block;
  width: auto;
  height: 1.1em;
  margin-right: 0.3em;
  vertical-align: -0.12em;
}
@media (max-width: 760px) {
  /* スマホ: 1行目は葉の印だけ、2行目に「ネハヤス管理サービス」を1行で(2026-11-13 たいち「スマホのとき、ネハヤスは下にして。ネハヤス管理サービス になるように」)。
     字は34px。題の入る幅(画面の幅−左右20pxずつ)に10字が入らない狭い幅だけ、字を小さくして1行に収める(10字と字の間隔で字の10.5個分) */
  .page-owner_management .mng-hero-title {
    font-size: min(34px, calc((100vw - 40px) / 10.5));
    line-height: 1.2;
  }
  .page-owner_management .mng-hero-mark {
    display: block;
    height: 32px;
    margin: 0 0 8px;
  }
  .page-owner_management .mng-hero-name {
    white-space: nowrap;
  }
}
@media (max-width: 760px) {
  .page-owner_management .page-hero-inner {
    padding-top: var(--page-hero-pad-top);
  }
}
.page-owner_management .page-hero-lead {
  margin-top: 8px;
}
.page-owner_management .mng-hero-metrics {
  margin-top: 16px;
}
.page-owner_management .mng-hero-metrics + .page-hero-actions {
  margin-top: 18px;
}
.page-owner_management .mng-metric-number {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  text-align: right;
}
/* 業務の章は白地 */
/* ①〜⑤の見出しは要の言葉1つを黄緑に(たいち 11/07。トップの「お悩み」と同じ作り。他のページの見出しは黒字) */
.page-owner_management .section-title-center em {
  color: var(--brand-green);
  font-size: 1.22em;
  line-height: 1;
  font-style: normal;
}
.page-owner_management .mng-work {
  padding-top: 56px;
  background: #fff;
}
@media (max-width: 760px) {
  .page-owner_management .page-hero-photo::after {
    background: linear-gradient(90deg, rgba(14, 16, 18, 0.84) 0%, rgba(14, 16, 18, 0.5) 100%);
  }
}

/* 全ページ共通の帯の高さに収める(たいち 11/07)。パソコン幅は説明を1行にし、数字と右の流れを少し詰める */
@media (min-width: 761px) {
  .page-owner_management .page-hero-inner {
    padding-bottom: 24px;
  }
  .page-owner_management .page-hero-lead br {
    display: none;
  }
}
@media (min-width: 1101px) {
  .page-owner_management .page-hero-inner {
    align-content: start;
    align-items: start;
  }
  .page-owner_management .mng-metric-number {
    font-size: 36px;
  }
  .page-owner_management .mng-hero-metrics {
    margin-top: 12px;
  }
  .page-owner_management .mng-hero-metrics + .page-hero-actions {
    margin-top: 14px;
  }
  .page-owner_management .mng-story {
    align-self: start;
  }
  .page-owner_management .mng-story-title {
    margin-bottom: 6px;
  }
  /* 矢羽根の切り込みを浅くして、低い段でも文字が欠けないようにする */
  .page-owner_management .mng-story .mng-story-list li + li {
    margin-top: -6px;
  }
  .page-owner_management .mng-story a {
    padding-block: 8px 10px;
    clip-path: polygon(0 0, 50% 7px, 100% 0, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px));
  }
  .page-owner_management .mng-story .mng-story-list li:first-child a {
    padding-top: 6px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px));
  }
  .page-owner_management .mng-story .mng-story-list li:last-child a {
    padding-block: 8px 4px;
    clip-path: polygon(0 0, 50% 7px, 100% 0, 100% 100%, 0 100%);
  }
  .page-owner_management .mng-story-text b {
    font-size: 14px;
    line-height: 1.4;
  }
  .page-owner_management .mng-story-text small {
    margin-top: 0;
    font-size: 11.5px;
    line-height: 1.4;
  }
}

/* スマホ: 帯の高さに収めるため、ボタンを2列に並べる。余った1つは幅いっぱい */
@media (max-width: 760px) {
  .page-owner_management .page-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-owner_management .page-hero-actions .btn {
    min-height: 48px;
    padding: 8px 6px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .page-owner_management .page-hero-actions .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* 帯のボタン: 大きさと位置だけ、題の幅に合わせて少し小さく(2026-11-08 たいちの赤枠)。見た目はサイト共通のボタンのまま */
@media (min-width: 761px) {
  .page-owner_management .page-hero-actions .btn {
    min-height: 44px;
    padding: 8px 22px;
    font-size: 14px;
  }
}

/* 章の番号: 丸数字をやめ、小さめの「01」にする(2026-11-08 たいち「①とか②とかが非公式感ある」)。見出しの上の短い黄緑の線は 11/09 たいち「全部緑の線いらない」で外した */
.page-owner_management .chapter-num {
  margin-right: 0.4em;
  font-family: var(--font-sans);
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-green);
  vertical-align: 0.15em;
}
.page-owner_management .mng-story-num {
  font-variant-numeric: tabular-nums;
}

/* 帯のボタン: 数字の段から少し離して下へ(2026-11-08 たいち「もうちょい下。スマホも」)。後から読まれる sizes.css に負けないよう html から書く */
html .page-owner_management .mng-hero-metrics + .page-hero-actions {
  margin-top: 30px;
}
@media (max-width: 760px) {
  html .page-owner_management .mng-hero-metrics + .page-hero-actions {
    margin-top: 26px;
  }
}

/* 2つのプランのしくみ(スマホ): 言葉の切れ目で折り返し、行間を空けて詰まって見えないようにする(2026-11-08 たいち) */
@media (max-width: 760px) {
  .page-owner_management .mng-zu {
    word-break: auto-phrase;
    text-wrap: pretty;
  }
  .page-owner_management .mng-zu-head b {
    line-height: 1.7;
  }
  .page-owner_management .mng-zu-link p {
    line-height: 1.6;
  }
  .page-owner_management .mng-zu-span {
    line-height: 1.7;
  }
  .page-owner_management .mng-zu-result-text {
    line-height: 1.9;
  }
  .page-owner_management .mng-zu-example {
    line-height: 1.7;
  }
  .page-owner_management .mng-zu-for .dot-list li {
    line-height: 1.75;
  }
  .page-owner_management .mng-zu-result small {
    font-size: 12px;
    line-height: 1.85;
  }
}

/* 特典の札: 題が2行の札があっても、並んだ札の黄緑の線と題の箱の高さをそろえる(2026-11-08 たいち「他と高さあってないからそろえろ」) */
html .page-owner_management .perk-card h4 {
  min-height: 3.2em;
}

/* 一番狭いスマホでも「空室が出た月」を 11.5px のまま1行に収めるため、枠の内側の余白を少し詰める */
@media (max-width: 400px) {
  .page-owner_management .mng-zu-result {
    padding-inline: 14px;
  }
  .page-owner_management .mng-zu-months {
    gap: 4px;
  }
  .page-owner_management .mng-zu-months li {
    letter-spacing: -0.02em;
  }
}

/* タブレット幅(2列): 5・6枚目だけ横長(sizes.css の 16/9)になり、隣の段と高さがずれるので、上の4枚とそろえる */
@media (min-width: 761px) and (max-width: 1100px) {
  html .page-owner_management .perk-card:nth-child(n + 5) {
    aspect-ratio: 1 / 1;
  }
  html .page-owner_management .perk-card:last-child {
    aspect-ratio: 16 / 7;
  }
}

/* パソコンの表紙: 文字が後ろの写真の建物に掛からないよう、題を少し小さくし、説明を2行に戻し、ボタンを少し細くする(2026-11-09 たいち「建物に被ってる」) */
@media (min-width: 761px) {
  html .page-owner_management .mng-hero-title {
    font-size: clamp(30px, 2.6vw, 38px);
  }
  html .page-owner_management .page-hero-lead br {
    display: inline;
  }
  html .page-owner_management .page-hero-actions .btn {
    padding-inline: 18px;
  }
}
/* 広い画面ほど文字の始まりが右へ寄るので、写真を少し大きくして右へ逃がし、建物を文字から離す(右の端が少し切れる) */
@media (min-width: 761px) {
  html .page-owner_management .page-hero-photo img {
    width: 118%;
    max-width: none;
  }
}

/* スマホの表紙の数字: 端から端へ散らさず、3つを真ん中にまとめて間をそろえる(2026-11-09 たいち「いらん空白がある。真ん中にギュッと」) */
@media (max-width: 760px) {
  html .page-owner_management .mng-hero-metrics {
    justify-content: center;
  }
  html .page-owner_management .mng-hero-metrics > div,
  html .page-owner_management .mng-hero-metrics > div:first-child,
  html .page-owner_management .mng-hero-metrics > div:last-child {
    padding-inline: clamp(12px, 4.5vw, 20px);
  }
  html .page-owner_management .mng-hero-metrics > div:first-child {
    padding-left: 0;
  }
  html .page-owner_management .mng-hero-metrics > div:last-child {
    padding-right: 0;
  }
}

/* 管理業務の6枚(スマホ): トップの「お任せいただける管理業務とご相談」と同じ2列×3段(2026-11-09 たいち「これ 2×3 にしてや」)。
   写真の上に題と説明を重ねる形はパソコンと同じ。説明は消さず、カードを縦長(3:4)にして収める。パソコンは変えない */
@media (max-width: 760px) {
  html .page-owner_management .mng-work .mng-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  html .page-owner_management .mng-work .mng-cards a {
    aspect-ratio: 3 / 4;
  }
  html .page-owner_management .mng-work .mng-cards a::before {
    background: linear-gradient(
      180deg,
      rgba(10, 12, 14, 0) 22%,
      rgba(10, 12, 14, 0.78) 52%,
      rgba(10, 12, 14, 0.95) 100%
    );
  }
  html .page-owner_management .mng-work .mng-cards-body {
    right: 10px;
    bottom: 12px;
    left: 10px;
    gap: 6px;
  }
  html .page-owner_management .mng-work .mng-cards-title {
    font-size: 15.5px;
    letter-spacing: 0.04em;
  }
  html .page-owner_management .mng-work .mng-cards-text {
    font-size: 12.5px;
    line-height: 1.6;
    letter-spacing: 0;
  }
}
/* 一番狭いスマホ(幅320前後)では説明が4〜5行になるので、カードを少し縦長にして写真の上に収める */
@media (max-width: 350px) {
  html .page-owner_management .mng-work .mng-cards a {
    aspect-ratio: 2 / 3;
  }
}

/* スマホ・タブレットの再総点検(2026-11-10): iPhone の Safari は「言葉の切れ目で折る」指定(auto-phrase)を使えず、狭い所で言葉の途中から折れる。
   短い文・札・図の字は、句読点・空白と、ページに入れた <wbr> の所でだけ折る。入りきらない時だけ、どこでも折る */
@media (max-width: 1100px) {
  .page-owner_management :is(.mng-zu-span, .mng-zu-party b) {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}
/* 表紙のボタン: 幅360未満では2つ並べると字が入りきらないので、1つずつ幅いっぱいにする。折れた字も真ん中にそろえる */
@media (max-width: 359px) {
  html .page-owner_management .page-hero-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-owner_management .page-hero-actions .btn {
  text-align: center;
}
/* タブレット幅(761〜900)では図の人の箱が約96pxしかなく「オーナー様」の「様」だけが落ちるので、字を少し小さくして1行に収める */
@media (min-width: 761px) and (max-width: 900px) {
  .page-owner_management .mng-zu-party b {
    font-size: 14px;
    letter-spacing: 0;
  }
  .page-owner_management .mng-zu-party small {
    font-size: 11.5px;
    letter-spacing: 0;
  }
}

/* サブリースの4つのポイント(スマホ): 見出しから4枚目までが1画面に収まるよう2×2に並べる(2026-11-12 たいち「1つの画面に収めるようにしたい。2×2でもいいし、縦4でもいい」)。
   説明は消さず14pxのまま。枠・番号の黄緑の線・書体は今のまま、余白だけ詰める。パソコンは変えない */
@media (max-width: 760px) {
  html .page-owner_management .mng-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  html .page-owner_management .mng-points .info-card {
    padding: 14px 13px 16px;
  }
  html .page-owner_management .mng-points .num {
    margin-bottom: 8px;
    padding-bottom: 5px;
    font-size: 20px;
  }
  html .page-owner_management .mng-points h3 {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.5;
  }
  html .page-owner_management .mng-points p:not(.num) {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0;
  }
}
/* 一番狭いスマホ(幅340以下)では2列だと札が約8字の幅しかなく、iPhone で言葉の途中から折れる。
   この幅は高さも足りず(568px)どちらにしても1画面に入らないので、読みやすさを取って1列にする */
@media (max-width: 340px) {
  html .page-owner_management .mng-points {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 管理業務の流れ(スマホ・タブレットの2×2): 4枚の間の真ん中に、ぐるっと回る印を置き、04 の後は 01 に戻る輪だと見て分かるようにする
   (2026-11-13 たいち「1~4のサイクルの真ん中に回ってるアイコンいれればいいんじゃないのか」)。
   印は札の間の矢印と同じ黄緑の丸。下に置いていた「退去の次は、また 01 入居者募集へ」は同じ意味なので出さない。パソコンの輪は今のまま。
   01 の札の右下の角が、4枚の間のすき間の交わる所(札は段の高さいっぱいに伸びる) */
@media (max-width: 1100px) {
  html .page-owner_management .mng-cycle {
    --cycle-mark: 46px;
  }
  html .page-owner_management .mng-cycle::before {
    content: none;
  }
  html .page-owner_management .mng-cycle .info-card:nth-child(1)::before {
    content: "↻";
    position: absolute;
    z-index: 2;
    right: calc((var(--cycle-gap-x) + var(--cycle-mark)) / -2);
    bottom: calc((var(--cycle-gap-y) + var(--cycle-mark)) / -2);
    display: grid;
    place-items: center;
    width: var(--cycle-mark);
    height: var(--cycle-mark);
    border-radius: 50%;
    background: var(--brand-green);
    color: var(--color-text);
    font-size: calc(var(--cycle-mark) * 0.56);
    font-weight: 700;
    line-height: 1;
  }
}
@media (max-width: 760px) {
  html .page-owner_management .mng-cycle {
    --cycle-mark: 34px;
  }
}

/* 集金代行の図(スマホ): 入居者様→ネハヤスの矢印の下は契約の点線が無く、空の場所だけが残って大きな空白になっていた。
   スマホではその空の場所を詰める(2026-11-13 たいち「いらんなら詰めろ」)。サブリースの図とパソコンは今のまま */
@media (max-width: 760px) {
  .page-owner_management .mng-zu-link .mng-zu-contract.is-empty {
    display: none;
  }
}