/* ネハヤス不動産 オーナー向けトップ モック(構成 Ver.2 / 2026-10-28)
   - 配色: 参考画像(白・明るいグレー・チャコールグレー)から測った色。フッターは黒
   - 大きさ: ヘッダー・表紙・実績の数字は「80%表示」相当、それより下は通常(100%)の大きさ
   - 色・余白・文字はすべてここの変数から引く。配色を変えるときは :root だけ触る */
:root {
  --color-base: #ffffff; /* 地 */
  --color-soft: #f3f4f8; /* 明るいグレーのパネル */
  --color-card: #ffffff;
  --color-sand: #e8e9ec; /* 写真の仮枠 */
  --color-line: #dfe0e3;
  --color-line-strong: #a1a0a1;
  --color-text: #141414; /* ほぼ黒 */
  --color-text-sub: #5f6164;
  --color-primary: #363838; /* チャコールグレーのパネル・ボタン */
  --color-primary-dark: #1f2020;
  --color-accent: #65676c; /* 番号などの中間グレー */
  --color-dark-text-sub: #b9babd; /* 濃い面の上の補足文字 */
  --color-footer: #1a1b1b; /* フッターは黒 */
  --color-header: #141414; /* ヘッダーも黒(2026-11-06 たいち)。文字は白 */
  --color-header-line: rgba(255, 255, 255, 0.16);
  --color-header-sub: #d3d4d6; /* 黒い地の上の補足文字。透けるメニューの上でも読める明るさ */
  --color-menu-glass: rgba(20, 20, 20, 0.78); /* 開いたメニューの地。少し後ろが透ける */

  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-mark: "Jost", "Noto Sans JP", sans-serif; /* 表紙の社名(元のサイトと同じ書体) */
  --font-display: var(--font-serif); /* 際立たせる文字の書体。下の決まりの所だけで使う */
  --font-display-weight: 600;
  /* 書体の決まり(2026-11-06 たいち決定。2026-11-04 の「ゴシックに統一」を置き換える)
     - 明朝 --font-display: 見る人が一目で受け取る文字。表紙の見出し・企業理念、各ページの1番大きい題、章の題、相談の帯の題、トップの6つの理由の題
     - ゴシック --font-sans: それ以外の全部。本文・説明文・カードの題・小見出し・ボタン・数字・表・メニュー・入力欄
     - 太さ: 明朝は --font-display-weight、ゴシックの題は 700、本文は 400
     - 例外: 表紙の社名(--font-mark)、会社情報の代表あいさつの手紙(筆の書体) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* 元のサイトと同じ動きのカーブ */

  --container: 1200px;
  --container-hero: 1120px;
  --gutter: 32px;
  --section-space: 72px;
  --radius: 2px;
  /* ボタンの形(2026-11-04 たいちが A 案に決定): 角を丸く、濃い枠、太字。全部の .btn がこれを使う */
  --btn-radius: 8px;
  --btn-border-width: 2px;
  --btn-border-color: var(--color-text);
  --header-height: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  /* 長いカタカナ語(アパマンショップオンライン専門店など)が文節ごと1語になって枠の外へ出るのを防ぐ。
     はみ出す時だけ語の途中で折る(中身の一番狭い幅は変えない)。2026-11-09 たいち「いろんな携帯で文字崩れないように」 */
  overflow-wrap: break-word;
  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
/* ボタンと入力欄は書体を親から受け継がないので、本文と同じ書体にする */
button,
input,
select,
textarea {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}
/* 見出しは文節の途中で改行しない(対応ブラウザのみ。非対応でも通常の改行になるだけ) */
h1,
h2,
h3,
h4 {
  word-break: auto-phrase;
}

.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.pc-only {
  display: inline;
}
/* スマホの幅(760px 以下。ヘッダーのボタンを隠す幅と同じ)だけに出す語句 */
.sp-only {
  display: none;
}

.mock-ribbon {
  background: var(--color-text);
  color: #f1f0ec;
  font-size: 12px;
  text-align: center;
  padding: 4px 16px;
}
.placeholder-box {
  display: grid;
  place-items: center;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(0, 0, 0, 0.025) 12px 24px),
    var(--color-sand);
  color: var(--color-text-sub);
  font-size: 13px;
  line-height: 1.6;
}

/* ===== ボタン・リンク ===== */
.btn {
  display: inline-flex;
  /* 狭い幅で中の語句(アパマンショップ/オンライン専門店)が1行に並びきらない時だけ、次の行へ回す */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 32px;
  border: var(--btn-border-width) solid var(--btn-border-color);
  border-radius: var(--btn-radius);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s var(--ease);
}
/* マウスを乗せると少し浮く(全部のボタンで同じ動き)。
   タッチの端末ではタップ後に浮いたまま残るので、マウスのある端末だけにする */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-2px);
  }
}
.btn-small {
  min-height: 40px;
  padding: 6px 20px;
  font-size: 13px;
}
.btn-wide {
  width: 100%;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
}
.btn-white {
  background: #fff;
  color: var(--color-text);
}
.btn-white:hover {
  background: var(--color-soft);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(
    255,
    255,
    255,
    0.85
  ); /* 暗い地の上に置くので、枠は白のまま(黒い枠は暗い地で見えない) */
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}
.btn-outline {
  background: transparent;
  color: var(--color-text);
}
.btn-outline:hover {
  background: var(--color-text);
  color: #fff;
}
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
/* ボタンは写真や暗い地の上にも置くので、黒い輪の内側に白い輪を敷いて、どの地でも見えるようにする */
.btn:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-text);
  white-space: nowrap;
}
.text-arrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ===== ヘッダー(80%表示相当) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-header);
  border-bottom: 1px solid var(--color-header-line);
  color: #fff;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-height);
  padding-inline: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo {
  width: 150px;
}
.brand-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.45);
}
/* 黒い地で読めるよう、表紙と同じ横長のロゴを使う */
.brand-apaman img {
  height: 30px;
  width: auto;
  border-radius: 3px;
}
.logo-fallback {
  font-size: 10px;
  color: var(--color-text-sub);
  border: 1px dashed var(--color-line-strong);
  padding: 2px 6px;
}
.global-nav {
  margin-left: auto;
}
.global-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
}
.global-nav a,
.sub-toggle {
  display: block;
  padding: 8px 10px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.global-nav a:hover,
.sub-toggle:hover {
  color: var(--color-header-sub);
}
.global-nav > ul > li > :is(a, button) {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding-block: 0;
  line-height: 1;
  appearance: none;
}
.sub-toggle::after {
  content: "▾";
  margin-left: 4px;
  font-size: 9px;
  color: var(--color-header-sub);
}
.has-sub {
  position: relative;
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.15s,
    transform 0.15s,
    visibility 0.15s;
}
.sub-menu a {
  padding: 8px 16px;
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu,
.has-sub.is-open .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.site-header .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--color-text);
}
.site-header .btn-primary:hover {
  background: var(--color-soft);
  border-color: var(--color-soft);
}
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: none;
}
.header-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  line-height: 1.3;
}
.header-tel-number {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
}
.header-tel-hours {
  font-size: 10px;
  color: var(--color-header-sub);
}
.menu-button {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  padding: 4px;
  font: inherit;
  cursor: pointer;
  color: #fff;
}
.menu-button-bars,
.menu-button-bars::before,
.menu-button-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.menu-button-bars::before,
.menu-button-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-button-bars::before {
  top: -6px;
}
.menu-button-bars::after {
  top: 6px;
}
.menu-button-bars {
  margin: 8px 0 6px;
}
.menu-button-label {
  font-size: 9px;
}
/* 項目が増えて背の低い画面に収まらない時は、メニューの中だけ縦に動かす(下の固定ボタンの分も空ける) */
.mobile-menu {
  /* 下の固定の帯の高さ(--mobile-bar-h)を引く。帯の出ない幅では 0(2026-11-10 再総点検: 3px のすき間・横向きの空き) */
  max-height: calc(100dvh - var(--header-height) - var(--mobile-bar-h, 0px));
  overflow-y: auto;
  border-top: 1px solid var(--color-header-line);
  background: var(--color-header);
}
/* まとまり(オーナーの皆様・賃貸経営情報): 押すと中が開く。右の丸の＋が開くと−になる */
.mobile-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-header-line);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.mobile-group summary::-webkit-details-marker {
  display: none;
}
.mobile-group summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}
.mobile-group[open] summary {
  color: var(--brand-green);
}
.mobile-group[open] summary::after {
  content: "−";
}
.mobile-group ul {
  background: #1f2020;
}
.mobile-group ul a {
  padding-left: 36px;
  font-size: 14px;
  color: #e6e6e6;
}
.mobile-menu-actions {
  display: grid;
  gap: 10px;
  padding: 16px 20px 20px;
}
.mobile-menu-actions .btn {
  display: flex;
  border-bottom: 0;
}
/* メニューの行の白い字(.mobile-menu a)を、白いボタンでは黒に戻す */
.mobile-menu .mobile-menu-actions .btn.btn-white {
  background: #fff;
  border-color: #fff;
  color: var(--color-text);
}
.mobile-menu .mobile-menu-actions .btn.btn-owner-web {
  margin: 0;
}
.mobile-menu a {
  display: block;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-header-line);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

/* ===== 1. ファーストビュー(80%表示相当) =====
   元のサイトと同じ流れ:
   ① 白い幕が晴れる → ② 暗いモノクロの写真に「NEHAYAS」が1文字ずつ浮かぶ
   → ③ 3.6秒後(html.hero-ready)に写真が色づき、社名が消え、見出しが下から順に出る。
   写真は最初から最後まで、34秒かけてゆっくり左右に動き続ける */
.hero {
  position: relative;
  height: min(calc(100vh - var(--header-height) - 24px), 640px);
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #3a3b3c;
  color: #fff;
}
.hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* 写真の切り替え(ミラタップと同じ作り):
   重ねた写真のうち .is-active だけを 2 秒かけて浮かび上がらせる。
   写真は横幅を 110% にしておき、表示中(.is-moving)は左へ 3% ゆっくり流す */
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
}
.hero-slide img,
.hero-photo-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  transform: translateX(0);
}
.hero-slide.is-moving img,
.hero-photo-dim.is-moving {
  transform: translateX(-3%);
  transition: transform 8s linear;
  will-change: transform;
}
/* 最初だけ、1枚目の写真を暗いモノクロにして社名を見せる(元のサイトの演出) */
.hero-photo-dim {
  filter: grayscale(1) brightness(0.46) contrast(1.3);
  transition: opacity 2.4s var(--ease);
  will-change: opacity, transform;
}
.hero-photo-dim.is-moving {
  transition:
    transform 8s linear,
    opacity 2.4s var(--ease);
}
.hero-ready .hero-photo-dim {
  opacity: 0;
}
/* 文字を読ませるため、写真の左側だけ暗くする(見出しが出るときに一緒に出す) */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(315deg, rgba(20, 21, 22, 0.5) 0%, rgba(20, 21, 22, 0) 32%),
    /* 右下の企業理念用 */
    linear-gradient(
      90deg,
      rgba(20, 21, 22, 0.58) 0%,
      rgba(20, 21, 22, 0.42) 42%,
      rgba(20, 21, 22, 0) 72%
    );
  opacity: 0;
  transition: opacity 2s var(--ease);
}
.hero-ready .hero-photo::after {
  opacity: 1;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #fff;
  pointer-events: none;
  animation: hero-veil 1.2s 0.05s var(--ease) forwards;
}
@keyframes hero-veil {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.hero-intro {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  pointer-events: none;
  transition:
    opacity 1.1s var(--ease),
    transform 1.3s var(--ease);
}
.hero-ready .hero-intro {
  opacity: 0;
  transform: translateY(-24px) scale(0.965);
}
.hero-intro-mark {
  display: flex;
  font-family: var(--font-mark);
  font-weight: 300;
  font-size: clamp(42px, 10.6vw, 148px);
  line-height: 1;
  letter-spacing: 0.055em;
  padding-left: 0.055em;
  white-space: nowrap;
}
.hero-intro-mark i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateY(0.42em);
  animation: hero-letter 1.9s var(--ease) forwards;
  animation-delay: calc(0.52s + var(--i) * 0.07s);
}
@keyframes hero-letter {
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-intro-tag {
  margin-top: clamp(14px, 2vw, 26px);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  white-space: nowrap;
  opacity: 0;
  animation: hero-up 1.6s 1.35s var(--ease) forwards;
}
@keyframes hero-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-content {
  position: relative;
  z-index: 14;
  max-width: 760px;
  margin-left: clamp(32px, 5.5vw, 88px);
  margin-right: auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.hero-ready .hero-content {
  pointer-events: auto;
}
.hero-content > *,
.hero-philosophy {
  opacity: 0;
}
.hero-ready .hero-eyebrow {
  animation: hero-up 1.2s 0.5s var(--ease) forwards;
}
.hero-ready .hero-title {
  animation: hero-up 1.3s 0.98s var(--ease) forwards;
}
.hero-ready .hero-lead {
  animation: hero-up 1.3s 1.1s var(--ease) forwards;
}
.hero-ready .hero-actions {
  animation: hero-up 1.3s 1.42s var(--ease) forwards;
}
.hero-ready .hero-philosophy {
  animation: hero-up 1.6s 1.7s var(--ease) forwards;
}
.hero-eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
}
.hero-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.hero-lead {
  font-size: 14px;
  line-height: 2;
  margin-bottom: 30px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  text-shadow: none;
}
.hero-actions .btn {
  min-height: 48px;
  padding: 10px 28px;
  font-size: 14px;
}
/* 企業理念: 写真の右下。読める大きさにする */
.hero-philosophy {
  position: absolute;
  z-index: 14;
  right: clamp(24px, 3.5vw, 56px);
  bottom: clamp(24px, 3vw, 44px);
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.14em;
  text-align: right;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* ===== 実績の数字(80%表示相当) ===== */
/* 黒地に白文字(表紙の写真の下を締める) */
.stats {
  background: var(--color-footer);
  color: #fff;
}
.stats-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100% - var(--gutter) * 2, var(--container-hero));
  margin-inline: auto;
}
.stat {
  padding: 22px 16px 20px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.stat:first-child {
  border-left: 0;
}
.stat dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-dark-text-sub);
  letter-spacing: 0.12em;
}
.stat dd {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-height: 46px;
}
.stat-number {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: lining-nums;
}
.stat-unit {
  font-size: 14px;
  font-weight: 500;
}
.stat-note {
  font-size: 11px;
  color: var(--color-dark-text-sub);
  line-height: 1.7;
}

/* ===== セクション共通(ここから下は 100% の大きさ) ===== */
.section {
  padding-block: var(--section-space);
}
.section[hidden] {
  display: none;
}
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.section-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
.section-lead {
  margin-top: 12px;
  max-width: 760px;
  font-size: 15.5px;
  color: var(--color-text-sub);
}
.section-title-center {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 48px;
}
.section-title-center::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-text);
  margin: 22px auto 0;
}
.sub-heading {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--color-primary);
  line-height: 1.4;
}

/* ===== 2. 募集物件: 横に流れ続ける帯(元のサイトの動きを踏襲) ===== */
.section-listings {
  padding-block: 72px 80px;
  background: var(--color-soft);
}
.listing-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.listing-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: listing-flow 52s linear infinite;
}
.listing-marquee:hover .listing-track {
  animation-play-state: paused;
}
@keyframes listing-flow {
  to {
    transform: translateX(-50%);
  }
}
.listing-card {
  width: 272px;
  flex: none;
  background: var(--color-card);
  border: 1px solid var(--color-line);
}
.listing-photo {
  height: 140px;
  overflow: hidden;
}
.listing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.03);
}
.listing-body {
  padding: 14px 18px 16px;
}
.listing-area {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 2px 10px;
}
.listing-name {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listing-rent {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: lining-nums;
}
.listing-rent em {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  margin-left: 4px;
  color: var(--color-text-sub);
}
.listing-spec {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-sub);
}

/* ===== 写真付きカード(お悩み・管理業務 共通) ===== */
.photo-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.photo-card > a,
.photo-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  text-decoration: none;
}
.photo-card > a {
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}
.photo-card > a:hover {
  border-color: var(--color-line-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}
.photo-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-sand);
}
.photo-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}
.photo-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
.photo-card-body h3 {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
}
.photo-card-body p {
  font-size: 15px;
  color: var(--color-text-sub);
  line-height: 1.85;
}
.photo-card-body .card-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  margin: -4px 0 6px;
}
.card-more {
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--color-line);
}
.card-links {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  border-top: 1px solid var(--color-line);
}
.card-links a {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
}
/* ===== 4. 選ばれる理由 ===== */
.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-primary);
  color: #fff;
}
.split-photo {
  position: relative;
  min-height: 520px;
}
.split-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-text {
  padding: 80px clamp(40px, 7vw, 100px);
  align-self: center;
  max-width: 720px;
}
.split-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.split-lead {
  font-size: 16px;
  color: var(--color-dark-text-sub);
  line-height: 2;
  margin-bottom: 30px;
}
/* 本文が2段落の時、段落の間は詰め、枠の前だけ広く空ける */
.split-lead:not(:last-of-type) {
  margin-bottom: 14px;
}

/* 店舗の章(集合写真): 写真を端まで敷いても、人の顔と店名のラベルが切れないようにする。
   写真の枠は「列の幅 × 写真と同じ横4:縦3」より縦長にしない(文章が高い時だけ縦に伸び、
   左右の何も無い余白だけが切れる)。見出しは列の幅に合わせて文字を縮め、必ず2行にする */
.section-split-fit {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
/* 枠の高さの下限を「幅 × 1087/1447」にする。aspect-ratio と grid の伸び方はブラウザで差が
   出るので、どのブラウザでも同じに動く padding の % (幅が基準)で高さを持たせる */
.section-split-fit .split-photo {
  min-height: 0;
  aspect-ratio: auto;
}
.section-split-fit .split-photo::before {
  content: "";
  display: block;
  padding-top: 75.12%;
}
.section-split-fit .split-text {
  padding: 40px clamp(24px, 3vw, 56px);
  max-width: none;
  container-type: inline-size;
}
.section-split-fit .split-title {
  margin-bottom: 20px;
}
/* 18 = 長い方の行(16字 × 字間 0.1em 込みで 17.6 字分)に、書体の違いの分の余裕を足した数。
   cqi が使えない古いブラウザでは、縮めずに今まで通り折り返す(改行を禁じて行末が切れないように) */
@supports (font-size: 1cqi) {
  .section-split-fit .split-title {
    font-size: min(30px, calc(100cqi / 18));
    white-space: nowrap;
  }
}
/* 1280〜1500px は列が狭く文章が縦に伸びるので、本文と枠の文字を1段だけ小さくする */
@media (min-width: 1280px) and (max-width: 1500px) {
  .section-split-fit .split-lead {
    font-size: 15px;
    line-height: 1.9;
  }
  .section-split-fit .split-lead:not(:last-of-type) {
    margin-bottom: 10px;
  }
  .section-split-fit .split-lead:last-of-type {
    margin-bottom: 24px;
  }
}
/* 1279px 以下は横に並べると写真が縦長になりすぎるので、スマホと同じく写真を上に置く */
@media (max-width: 1279px) {
  .section-split-fit {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-split-fit .split-text {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    padding: 56px clamp(24px, 6vw, 64px) 64px;
  }
}
@media (max-width: 760px) {
  .section-split-fit .split-text {
    padding: 40px 20px 48px;
  }
  .section-split-fit .split-title {
    letter-spacing: 0.06em;
  }
}
@supports (font-size: 1cqi) {
  @media (max-width: 760px) {
    .section-split-fit .split-title {
      font-size: min(22px, calc(100cqi / 17.6));
    }
  }
}

/* 6枚とも同じ高さ。白・グレー・黒を市松に並べて、全部白の単調さをなくす */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}
.why-item {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 28px 28px 30px;
}
.why-no {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-line-strong);
  font-variant-numeric: lining-nums;
  margin-bottom: 14px;
}
.why-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.why-item > p:not(.why-no) {
  font-size: 15px;
  color: var(--color-text-sub);
}
.why-item:nth-child(1),
.why-item:nth-child(6) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.why-item:nth-child(3),
.why-item:nth-child(4) {
  background: var(--color-sand);
  border-color: var(--color-sand);
}
.why-item:nth-child(1) > p:not(.why-no),
.why-item:nth-child(6) > p:not(.why-no) {
  color: var(--color-dark-text-sub);
}
.why-item:nth-child(1) .why-no,
.why-item:nth-child(6) .why-no {
  color: rgba(255, 255, 255, 0.35);
}
.why-item:nth-child(3) .why-no,
.why-item:nth-child(4) .why-no {
  color: var(--color-accent);
}

/* ===== 5. 管理サービス ===== */
.section-service {
  background: var(--color-soft);
}
.plan-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 56px;
}
/* 2つのプランは黒で目立たせる */
.plan-card {
  background: var(--color-primary);
  color: #fff;
  padding: 32px 34px;
}
.plan-card h4 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.plan-card p {
  font-size: 15px;
  color: var(--color-dark-text-sub);
  margin-bottom: 16px;
}
.plan-card .text-arrow {
  color: #fff;
}
.section-service .photo-card-grid {
  margin-bottom: 20px;
}
.consult-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.consult-card {
  display: block;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 24px 28px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.consult-card:hover {
  border-color: var(--color-line-strong);
}
.consult-card h3 {
  font-size: 17.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.consult-card p {
  font-size: 15px;
  color: var(--color-text-sub);
  margin-bottom: 10px;
}

/* ===== 6. AI賃料査定 =====
   部屋の写真を全面に敷き、左を白くぼかして文字を載せる。報告書はすりガラスの台の上(2026-11-04、たいちが3案から案 b を選んだ)。
   写真は仮。たいちが作った写真に差し替える */
.section-appraisal {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.92) 48%,
      rgba(255, 255, 255, 0.35) 78%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    url("/img/new/hero-3-living-indirect-light.webp") center / cover no-repeat;
  color: var(--color-text);
  padding-block: 104px;
}
.appraisal-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 64px;
  align-items: center;
}
.appraisal-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.appraisal-lead {
  font-size: 16px;
  color: var(--color-text-sub);
  margin-bottom: 24px;
}
.appraisal-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
/* 4つのカード: 「管理サービス」「ご相談」の章のカードと同じ白・角丸・影。文字は題と同じ太さにする */
.appraisal-points li {
  display: flex;
  align-items: center;
  min-height: 72px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-card);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 14px 20px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
}
.appraisal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.appraisal-sublink {
  font-size: 15px;
  color: var(--color-text);
}
.appraisal-notes {
  margin-top: 20px;
  display: grid;
  gap: 2px;
  font-size: 13.5px;
  color: var(--color-text-sub);
}
.appraisal-notes li {
  position: relative;
  padding-left: 16px;
}
.appraisal-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  font-size: 12px;
}
.appraisal-visual {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  box-shadow: 0 30px 60px rgba(20, 20, 20, 0.22);
  padding: 32px;
}
.appraisal-visual img {
  width: 100%;
}
/* 「利用 無料」の丸: 2行を丸の真ん中にまとめる */
.appraisal-free {
  position: absolute;
  z-index: 6;
  top: -18px;
  right: -18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--brand-green);
  line-height: 1.15;
  text-align: center;
}
.appraisal-free small {
  font-size: 12px;
}
.appraisal-free b {
  font-size: 22px;
}

/* ===== 7. 会社の信頼・実績(ChatGPT 版の形) ===== */
.trust-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-soft);
  border: 1px solid var(--color-line);
  min-height: 560px;
}
.trust-photo {
  position: relative;
  min-height: 420px;
}
.trust-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trust-text {
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trust-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}
.trust-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}
.trust-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin: 14px 0 16px;
}
.trust-lead {
  font-size: 15px;
  color: var(--color-text-sub);
  line-height: 2;
}
.trust-facts {
  margin-top: 20px;
  border-top: 1px solid var(--color-line);
}
.trust-fact {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 14.5px;
  color: var(--color-text-sub);
}
.trust-fact b {
  display: block;
  font-size: 15.5px;
  color: var(--color-text);
}
.trust-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}

/* ===== 8. オーナー様の声 ===== */
.section-voice {
  background: var(--color-soft);
}
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.voice-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
}
.voice-photo {
  aspect-ratio: 16 / 10;
}
.voice-body {
  padding: 20px 22px 24px;
}
.voice-q {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}
.voice-text {
  font-size: 15px;
  color: var(--color-text-sub);
}
.voice-who {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-accent);
}

/* ===== 9. 流れ ===== */
/* 矢印でつないだフロー図(参考: 導入の流れの図をモノトーンに)
   - 上に「ご相談・調査」「ご提案」の区切り線
   - 各ステップは右向きの矢印の形。右へ進むほど濃くなり、04 は黒
   - 04 の下に「ここで判断いただけます」の札をピンで留める */
.section-flow {
  background: var(--color-soft);
}
.flow-chart {
  --flow-arrow: 26px;
}
.flow-phases {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 24px;
  margin-bottom: 14px;
}
.flow-phase {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.flow-phase::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-text);
}
.flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr auto;
}
.flow-step {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.flow-no {
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: lining-nums;
  margin: 0 0 6px calc(var(--flow-arrow) + 6px);
}
.flow-step:first-child .flow-no {
  margin-left: 22px;
}
.flow-body {
  flex: 1;
  margin-right: calc(var(--flow-arrow) * -1);
  padding: 26px calc(var(--flow-arrow) + 22px) 28px calc(var(--flow-arrow) + 22px);
  clip-path: polygon(
    0 0,
    calc(100% - var(--flow-arrow)) 0,
    100% 50%,
    calc(100% - var(--flow-arrow)) 100%,
    0 100%,
    var(--flow-arrow) 50%
  );
}
.flow-step:first-child .flow-body {
  padding-left: 22px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--flow-arrow)) 0,
    100% 50%,
    calc(100% - var(--flow-arrow)) 100%,
    0 100%
  );
}
.flow-step:last-child .flow-body {
  margin-right: 0;
}
.flow-step:nth-child(1) .flow-body {
  background: #ffffff;
}
.flow-step:nth-child(2) .flow-body {
  background: #e8e9ec;
}
.flow-step:nth-child(3) .flow-body {
  background: #c9cacd;
}
.flow-step:nth-child(4) .flow-body {
  background: var(--color-primary);
  color: #fff;
}
.flow-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.flow-body p {
  font-size: 14.5px;
  color: var(--color-text-sub);
  margin-bottom: 12px;
}
.flow-step-decide .flow-body p {
  color: var(--color-dark-text-sub);
}
.flow-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}
.flow-pin {
  position: relative;
  justify-self: center;
  align-self: start;
  margin-top: 34px;
  background: var(--color-text);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 18px;
}
.flow-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 30px;
  background: var(--color-text);
}
.flow-pin::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  bottom: calc(100% + 26px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-soft);
}
.flow-foot {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--color-card);
  font-size: 15px;
  color: var(--color-text-sub);
}
.flow-foot b {
  display: block;
  color: var(--color-text);
}
.flow-foot a {
  font-weight: 700;
  color: var(--color-text);
}

/* ===== 11.5 主な取引先 ===== */
.partners-lead {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--color-text-sub);
}
/* 7社なので 4枚+3枚。下の段は中央に寄せる */
.section-cases {
  background: var(--color-soft);
}
.case-photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.case-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}
.case-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.case-tags em {
  font-style: normal;
  font-size: 12px;
  border: 1px solid var(--color-line-strong);
  padding: 0 8px;
  color: var(--color-text-sub);
}

/* ===== 改善事例のカード(改善事例の一覧とトップ 共通。部品は src/components/owner/CaseCard.astro) =====
   深緑の帯(番号・オーナー様の声・分類の札) → 写真 → ネハヤスの管理でどうなったか。どれも1行に収める */
.page-owner_cases,
.cases-grid {
  --case-green: #1d5b3d;
}
.cases-grid {
  grid-template-columns: repeat(3, 1fr);
}
.cases-grid .photo-card > a {
  border-color: var(--case-green);
}
.cases-grid .photo-card-image {
  aspect-ratio: 4 / 3;
}
.cases-grid .case-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  color: #fff;
  background: var(--case-green);
  white-space: nowrap;
}
.cases-grid .case-no {
  flex: none;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.cases-grid .case-voice {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* 分類はボタンのような枠に入れる */
.cases-grid .case-cat {
  flex: none;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.cases-grid .case-area {
  margin: 0 0 6px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--color-text-sub);
}
.cases-grid .case-result {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--case-green);
}
.cases-grid .case-result small {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}
@media (max-width: 1100px) {
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* スマホ: カードは左に写真・右に中身 */
@media (max-width: 760px) {
  .cases-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cases-grid .photo-card > a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .cases-grid .case-head {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 8px 12px;
  }
  .cases-grid .case-no {
    font-size: 18px;
  }
  .cases-grid .case-voice {
    font-size: 13px;
  }
  .cases-grid .photo-card-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
    position: relative;
  }
  /* 写真の縦横に関係なく、カードの高さは文字の分だけにそろえる */
  .cases-grid .photo-card-image img {
    position: absolute;
    inset: 0;
  }
  .cases-grid .photo-card-body {
    justify-content: center;
    padding: 8px 12px;
  }
  .cases-grid .case-result {
    margin: 0;
    font-size: 16px;
  }
  .cases-grid .case-result small {
    font-size: 11px;
  }
  .cases-grid .case-area {
    margin-bottom: 2px;
    font-size: 12px;
  }
  .cases-grid .card-more {
    display: none;
  }
}
/* 幅の狭いスマホでも帯と一言を1行に収める */
@media (max-width: 374px) {
  .cases-grid .case-head {
    gap: 6px;
    padding: 8px 10px;
  }
  .cases-grid .case-voice {
    font-size: 12px;
    letter-spacing: 0;
  }
  .cases-grid .case-result {
    font-size: 15px;
  }
}

/* ===== 11. 動画と記事 ===== */
.article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.article-card a {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  text-decoration: none;
  height: 100%;
  transition: border-color 0.2s;
}
.article-card a:hover {
  border-color: var(--color-line-strong);
}
.article-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-sand);
}
.article-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-category {
  display: inline-block;
  font-size: 12px;
  background: var(--color-soft);
  padding: 0 10px;
  color: var(--color-text-sub);
  margin-bottom: 6px;
}
.article-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 6px;
}
.article-text {
  font-size: 14px;
  color: var(--color-text-sub);
}
.learn-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

/* ===== 12. FAQ(最初のモックの形: 1列・大きな Q/A) ===== */
.section-faq {
  background: var(--color-soft);
}
.section-faq .container {
  max-width: 920px;
}
.faq-list {
  border-top: 1px solid var(--color-primary);
}
.faq-item {
  border-bottom: 1px solid var(--color-line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 48px 22px 4px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-sub);
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-q,
.faq-a {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  width: 24px;
}
.faq-q {
  color: var(--color-text);
}
.faq-a {
  color: var(--color-accent);
}
.faq-answer {
  display: flex;
  gap: 18px;
  padding: 0 48px 26px 4px;
  font-size: 15.5px;
  color: var(--color-text-sub);
}

/* ===== 13. 相談: 写真の帯に白い箱 ===== */
.section-contact {
  position: relative;
  padding-block: 80px;
  background: var(--color-soft);
  overflow: hidden;
}
.contact-photo {
  position: absolute;
  inset: 0 0 0 45%;
}
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8);
}
.contact-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-soft) 0%, rgba(243, 244, 248, 0) 30%);
  z-index: 1;
}
.contact-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}
.contact-text {
  max-width: 520px;
}
.contact-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.contact-lead {
  font-size: 16px;
  color: var(--color-text-sub);
}
.contact-box {
  width: 380px;
  flex-shrink: 0;
  background: #fff;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.contact-box-label {
  font-size: 14px;
  color: var(--color-text-sub);
}
.contact-tel {
  display: block;
  font-family: var(--font-sans);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-variant-numeric: lining-nums;
}
.contact-hours {
  font-size: 13px;
  color: var(--color-text-sub);
}
.contact-box-actions {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

/* ===== 14. フッター(黒。ロゴ画像の色は変えないため社名は文字で出す) ===== */
.site-footer {
  background: var(--color-footer);
  color: #e6e4de;
  padding-top: 48px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
}
.footer-name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 6px;
}
.footer-philosophy {
  font-family: var(--font-sans);
  font-size: 14px;
  color: #d6d4cf;
  margin-bottom: 14px;
}
.footer-company address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.9;
  color: #b9b6ae;
}
.footer-license {
  margin-top: 10px;
  font-size: 13px;
  color: #b9b6ae;
}
.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 20px;
}
.footer-nav a {
  font-size: 14px;
  text-decoration: none;
  color: #b9b6ae;
}
.footer-nav a:hover {
  color: #fff;
  text-decoration: underline;
}
.copyright {
  text-align: center;
  font-size: 12px;
  color: #9d9a92;
  padding: 16px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===== スマホ下部の固定導線・モック確認用 ===== */
.mobile-cta-bar {
  display: none;
}
.mock-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  font-size: 12px;
}
.mock-panel-toggle {
  background: #fff;
  border: 1px dashed var(--color-line-strong);
  color: var(--color-text-sub);
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
}
.mock-panel-body {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  display: grid;
  gap: 6px;
  min-width: 160px;
}
.mock-panel-body[hidden] {
  display: none;
}
.mock-panel-title {
  font-weight: 700;
}
.mock-panel label {
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(92vw, 520px);
  background: var(--color-text);
  color: #fff;
  font-size: 13px;
  line-height: 1.7;
  padding: 12px 20px;
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.toast[hidden] {
  display: none;
}

/* 動きを減らす設定の人には、最初から通常の表紙を見せ、帯も止める */
@media (prefers-reduced-motion: reduce) {
  .listing-track {
    animation: none;
  }
  .hero-slide,
  .hero-slide img,
  .hero-photo-dim {
    transition: none !important;
  }
  .hero-veil,
  .hero-intro {
    display: none;
  }
  .listing-marquee {
    overflow-x: auto;
  }
}

/* 項目が増えたので、1行に収まりにくい幅ではヘッダーの余白だけ詰める */
@media (max-width: 1180px) {
  .header-inner {
    gap: 14px;
    padding-inline: 18px;
  }
  .global-nav > ul > li > :is(a, button) {
    padding-inline: 7px;
  }
  .header-actions {
    gap: 12px;
  }
}

/* メニューに採用情報を足したので、横に並び切らない幅からハンバーガーにする(2026-11-06) */
@media (max-width: 1260px) {
  .global-nav {
    display: none;
  }
  .menu-button {
    display: flex;
  }
  .header-actions {
    margin-left: auto;
  }
}

/* ===== タブレット ===== */
@media (max-width: 1100px) {
  .global-nav,
  .header-tel {
    display: none;
  }
  .menu-button {
    display: flex;
  }
  .header-actions {
    margin-left: auto;
  }
  .photo-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-photo {
    aspect-ratio: auto;
    height: 100%;
  }
  .article-grid {
    grid-template-columns: 1fr;
  }
  .trust-wrap {
    grid-template-columns: 1fr;
  }
  .trust-photo {
    min-height: 360px;
  }
}

/* ===== スマホ ===== */
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --section-space: 60px;
    --header-height: 58px;
  }
  body {
    font-size: 15px;
    padding-bottom: 64px;
  }
  .pc-only {
    display: none;
  }
  .sp-only {
    display: inline;
  }
  .mock-ribbon {
    font-size: 10.5px;
  }
  .header-inner {
    padding-inline: 16px;
    gap: 10px;
  }
  .brand {
    gap: 8px;
  }
  .brand-logo {
    width: 118px;
  }
  .brand-apaman img {
    height: 26px;
  }
  .brand-divider {
    height: 18px;
  }
  .header-actions .btn-small {
    display: none;
  }

  /* 表紙: 写真の上に社名→見出し。説明とボタンは写真の下 */
  .hero {
    height: auto;
    min-height: 0;
    display: block;
    background: #fff;
    color: var(--color-text);
  }
  .hero-photo {
    position: relative;
    aspect-ratio: 4 / 3;
  }
  .hero-photo::after {
    background: linear-gradient(180deg, rgba(20, 21, 22, 0) 35%, rgba(20, 21, 22, 0.6) 100%);
  }
  .hero-intro {
    inset: 0 0 auto 0;
    height: 75vw;
    color: #fff;
  }
  .hero-intro-tag {
    font-size: 11px;
    letter-spacing: 0.16em;
  }
  .hero-content {
    position: static;
    max-width: none;
    margin: 0;
    padding: 20px 20px 28px;
    text-shadow: none;
  }
  .hero-eyebrow,
  .hero-title {
    position: absolute;
    left: 20px;
    right: 20px;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  }
  .hero-eyebrow {
    font-size: 12px;
    margin: 0;
    top: calc(75vw - 106px);
  }
  .hero-title {
    font-size: 22px;
    margin: 0;
    top: calc(75vw - 82px);
  }
  .hero-lead {
    font-size: 14px;
    margin-bottom: 18px;
  }
  .hero-actions {
    flex-direction: column;
    gap: 10px;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .hero .btn-white {
    background: var(--color-primary);
    color: #fff;
  }
  .hero .btn-ghost {
    background: #fff;
    color: var(--color-text);
    border-color: var(--color-text);
  }
  .hero-philosophy {
    position: static;
    margin: 0 20px 28px;
    padding-top: 18px;
    border-top: 1px solid var(--color-line);
    color: var(--color-text);
    text-shadow: none;
    text-align: left;
    font-size: 15px;
    letter-spacing: 0.08em;
  }

  /* スマホでも3つを1段に並べる(2段にすると1つだけ下に余る) */
  .stats-list {
    width: 100%;
  }
  .stat {
    padding: 16px 4px;
  }
  .stat-number {
    font-size: 28px;
  }
  .stat dd {
    min-height: 38px;
  }

  .section-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
  }
  .section-title,
  .section-title-center {
    font-size: 22px;
  }
  .section-title-center {
    margin-bottom: 32px;
  }
  .section-lead {
    font-size: 14.5px;
  }

  .section-listings {
    padding-block: 48px 56px;
  }
  .listing-card {
    width: 230px;
  }

  .photo-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .photo-card > a,
  .photo-card-inner {
    display: grid;
    grid-template-columns: 110px 1fr;
  }
  .photo-card-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 120px;
  }
  .photo-card-body {
    padding: 14px 16px;
  }
  .photo-card-body h3 {
    font-size: 16px;
  }
  .photo-card-body p {
    font-size: 14px;
  }

  .section-split {
    grid-template-columns: 1fr;
  }
  .split-photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .split-text {
    padding: 40px 20px 48px;
  }
  .split-title {
    font-size: 22px;
  }
  .split-lead {
    font-size: 14.5px;
  }
  .why-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .why-item {
    padding: 22px 20px;
  }

  .plan-pair,
  .consult-pair {
    grid-template-columns: 1fr;
  }
  .plan-card,
  .consult-card {
    padding: 22px 20px;
  }

  /* 縦に並ぶので、白いぼかしも上から下へ */
  .section-appraisal {
    padding-block: 64px;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.9) 62%,
        rgba(255, 255, 255, 0.3) 100%
      ),
      url("/img/new/hero-3-living-indirect-light.webp") center / cover no-repeat;
  }
  .appraisal-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .appraisal-title {
    font-size: 24px;
  }
  .appraisal-points li {
    min-height: 60px;
    padding: 12px 14px;
    font-size: 14.5px;
  }
  .appraisal-visual {
    padding: 24px;
  }
  .appraisal-actions .btn {
    width: 100%;
  }
  .appraisal-free {
    top: -12px;
    right: -6px;
    width: 76px;
    height: 76px;
    font-size: 11px;
  }
  .appraisal-free b {
    font-size: 18px;
  }

  .trust-text {
    padding: 28px 22px 32px;
  }
  .trust-photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .trust-title {
    font-size: 21px;
  }

  .voice-grid {
    grid-template-columns: 1fr;
  }

  .case-photo {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .article-card a {
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 14px;
  }
  .article-title {
    font-size: 15px;
  }
  .article-text {
    display: none;
  }

  .faq-item summary {
    font-size: 15.5px;
    gap: 12px;
    padding: 18px 40px 18px 0;
  }
  .faq-answer {
    font-size: 14.5px;
    gap: 12px;
    padding: 0 0 20px 0;
  }

  .section-contact {
    padding-block: 0 40px;
  }
  .contact-photo {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
  }
  .contact-photo::before {
    content: none;
  }
  .contact-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 32px;
  }
  .contact-title {
    font-size: 22px;
  }
  .contact-box {
    width: auto;
    padding: 22px 20px;
  }
  .contact-tel {
    font-size: 32px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-nav ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .mobile-cta-bar {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.8fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
  }
  .mobile-cta-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 60px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border-left: 1px solid var(--color-line);
  }
  .mobile-cta-bar a:first-child {
    border-left: 0;
  }
  .mobile-cta-bar a.is-primary {
    background: var(--color-primary);
    color: #fff;
    border-left: 0;
  }
  .mock-panel {
    right: 10px;
    bottom: 74px;
  }
  .toast {
    bottom: 78px;
  }
}

/* 流れのフロー図: タブレット・スマホは縦に並べ、下向きの矢印でつなぐ */
@media (max-width: 1100px) {
  .flow-phases {
    display: none;
  }
  .flow-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .flow-step {
    display: flex;
    grid-row: auto;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
  }
  .flow-body {
    flex: 1;
    min-width: 0;
  }
  .flow-no,
  .flow-step:first-child .flow-no {
    margin: 18px 0 0;
    font-size: 40px;
    min-width: 52px;
  }
  .flow-body,
  .flow-step:first-child .flow-body {
    margin: 0 0 -16px;
    padding: 22px 22px 38px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px));
  }
  .flow-step:not(:first-child) .flow-body {
    padding-top: 34px;
  }
  .flow-step:last-child .flow-body {
    margin-bottom: 0;
    padding-bottom: 24px;
    clip-path: none;
  }
  /* 下向きの矢印の先が次の段に隠れないよう、上の段ほど手前に重ねる */
  .flow-step:nth-child(1) {
    z-index: 4;
  }
  .flow-step:nth-child(2) {
    z-index: 3;
  }
  .flow-step:nth-child(3) {
    z-index: 2;
  }
  .flow-step-decide {
    flex-wrap: wrap;
  }
  .flow-pin {
    margin: 14px 0 0 68px;
    align-self: flex-start;
  }
  .flow-pin::before,
  .flow-pin::after {
    display: none;
  }
}

/* ===== 文の折り返し(2026-10-28) =====
   - 本文: 行頭に「。」「ゃ」などを置かない。左揃え(両端揃えは文節で折り返すと文字の間が広がるのでやめた。2026-11-04)
   - 見出し・ボタン・カードの題名など短い文字: 文節の途中で折り返さない
   - 本文も文節の途中で折り返さない(「徹/底」「サ/イト」を防ぐ。2026-11-04)。枠より長い語だけは途中で折る */
body {
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}
/* 最後の行に1〜2文字だけ残る折り返しを避ける */
:is(p, li, dd, dt, td, th, figcaption, blockquote, summary) {
  text-wrap: pretty;
}
/* 表のマス・短い箇条書きなど短い文は、行の長さをそろえる(「…競合物件との/比較」を「周辺の/競合物件との比較」に)。
   長い文を持つ箇条書き(li 全般)や記事・規約の中は、右側が空いて見えるので対象外 */
:is(dd, dt, td, th, figcaption, .flow-tag, .appraisal-points li):not(
  :is(.article-body, .policy-body, .art) *
) {
  text-wrap: balance;
}
/* ===== Safari(句で折る指定 auto-phrase に対応しない)の時だけの直し(2026-11-10 再総点検) =====
   ① 行の長さをならす text-wrap: pretty / balance は、Safari では句で折れないまま行を早めに折るので、本文・箇条書き・表では外す
     (句の境目は phrase-wrap.js が付ける。見出し h1〜h4 の balance はそのまま)
   ② 1文のかたまり(.sentence、inline-block)は、中に改行 <br> があると箱の幅がその手前の長さに縮み、
     Safari では字の幅の見積もりが少し短いため、最長の行が入りきらずに早く折れる。改行を含む時は普通の文字の流れにする */
@supports not (word-break: auto-phrase) {
  :is(
    p,
    li,
    dd,
    dt,
    td,
    th,
    figcaption,
    blockquote,
    summary,
    address,
    .footer-license > div,
    .footer-bottom a
  ) {
    text-wrap: wrap;
  }
  .sentence:has(br) {
    display: inline;
  }
  /* 句のかたまり(phrase-wrap.js)が入る短い題は、最後の行に1〜2字の言葉だけが残らないよう行の長さをそろえる */
  :is(summary, .toc li, .article-definitions dt) {
    text-wrap: balance;
  }
  /* 上の帯の題は、折らない指定(nowrap)を残したまま、長い時(.is-long の2行)だけ行をそろえる。
     text-wrap: balance と書くと折らない指定まで消え、短い題も2行になって帯からはみ出す(2026-11-12 測り直し owner2#7) */
  .page-pin-title {
    text-wrap-style: balance;
  }
}
/* 記事の目次は、スマホの幅では最後の行に短い言葉だけが残らないよう行の長さをそろえる(Chromium も同じ。2026-11-10 再総点検 g3-14) */
@media (max-width: 760px) {
  .toc li {
    text-wrap: balance;
  }
}
/* ③ 横並びの中のボタンは縮めない(「サービスの詳細を/見る」と2行に折れて形が崩れるのを防ぐ)。入れ物より広くはしない */
.btn {
  flex-shrink: 0;
  max-width: 100%;
}
/* 横向きの低い画面(高さ500px以下)では、上に残る題の帯をしまう(ヘッダーと合わせて画面の3割近くがふさがり、後ろの字と重なるため) */
@media (max-height: 500px) {
  .page-pin {
    display: none !important;
  }
}
/* ひとかたまりにする語句。.nowrap はスマホでは折り返しを許すが、.keep はどの幅でも折り返さない。
   2〜8文字の短い語だけに使う(「お部屋」が「お部/屋」に割れるのを防ぐ)。
   inline-block にするのは、.keep を隙間なく続けて並べた所(「24時間」「サポート」「サービス」など)で、
   iPhone の Safari が塊と塊の境目でも折らず、全部を1つの長い塊にして枠の外へはみ出すため(2026-11-09 たいち
   「17プロで見ると文字が枠からはみ出してる」)。箱にすると、どのブラウザでも境目で折れる */
.keep {
  display: inline-block;
  white-space: nowrap;
}
/* 句のかたまり(phrase-wrap.js が、句で折る指定に対応しない Safari の時だけ付ける)。かたまりの中では折らず、境目でだけ折る */
.phrase {
  display: inline-block;
  white-space: nowrap;
}
/* 最後の短い塊を前の塊とつないだ物(phrase-rules.js の glueTail。「設備の|不具合への対応」)。.keep と同じく箱にして中で折らない */
.phrase-tail {
  display: inline-block;
  white-space: nowrap;
}
/* .keep を横に並べる入れ物(ボタン・目次の札など)は、狭い画面で並びきらない時に次の行へ回す(2026-11-09 たいち) */
:has(> .keep) {
  flex-wrap: wrap;
}
/* 見出しは文節でまとめて折る(auto-phrase)。長いカタカナの文節(アパマンショップオンライン専門店)が枠より長い時だけ、
   その途中でも折る。入れ物が見出しの長さまで広がって画面の外へ出るのを防ぐ */
h1,
h2,
h3,
h4 {
  overflow-wrap: anywhere;
}
/* 1文ずつのかたまり(sentence-wrap.js が付ける)。入りきらない文は次の行から始め、
   次の文の頭だけが行末に残らないようにする */
.sentence {
  display: inline-block;
  text-indent: 0;
}
h1,
h2,
h3,
h4,
summary,
.btn,
.more-link,
.text-arrow,
.card-more,
.card-links a,
.flow-tag,
.flow-pin,
.listing-name,
.article-title,
.trust-fact b,
.voice-q,
.hero-philosophy,
.split-title,
.appraisal-title,
.contact-title,
.trust-title {
  word-break: auto-phrase;
}
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
/* 中央・右寄せの部品は、親の揃え方に従う */
.stat-note,
.copyright,
.appraisal-free,
.mobile-cta-bar a {
  text-align: inherit;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* 1〜2文字だけ次の行に落ちないよう、ひとかたまりにする語句 */
.nowrap {
  white-space: nowrap;
}
/* ひとかたまりの語句を含む段落は左揃えにする(親が中央揃えでも、手前の短い行が中央に寄らないように)。1文のかたまり(.sentence)の中に入った場合も同じ */
:is(p, li):has(> .nowrap, > .sentence > .nowrap) {
  text-align: left !important;
}
/* スマホは幅が狭いので左揃えにする(本文の両端揃えは 2026-11-04 にやめたが、ページごとの中央揃えを上書きする役は残る) */
@media (max-width: 760px) {
  .photo-card-body p,
  .why-item > p,
  .plan-card p,
  .consult-card p,
  .flow-body p,
  .article-text,
  .voice-text,
  .trust-fact,
  .faq-answer p,
  .split-lead,
  .appraisal-notes li,
  .flow-foot,
  .section-lead,
  .contact-lead,
  .trust-lead {
    text-align: left;
  }
  .nowrap {
    white-space: normal;
  }
}
/* 電話番号のハイフン: 英字書体だと斜めに見えるので、まっすぐな書体にする */
.tel-hyphen {
  font-family: var(--font-sans);
  font-weight: 300;
  margin-inline: 0.06em;
}

/* ===== フッター: 元のサイト(site.js / base.css の .ft)と同じ中身・並び(2026-10-28) =====
   黒地に、文字は白・印はヘッダーと同じ黄緑のロゴ(2026-11-04 から。前は全体を白抜き) */
.site-footer {
  background: var(--color-footer);
  color: #fff;
  padding: clamp(56px, 6vw, 86px) 0 42px;
  border-top: 0;
}
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 4vw, 60px);
  padding-bottom: 48px;
}
.site-footer .footer-logo {
  width: 172px;
  height: auto;
  margin: 0;
  /* 文字は白、印はヘッダーと同じ黄緑のフッター用の画像を使う(filter で全体を白くしない) */
  opacity: 1;
}
/* フッターのロゴはヘッダーと同じ並び(2026-11-07 たいち) */
.footer-logos {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-logos-divider {
  flex: none;
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.45);
}
.footer-logo-apaman {
  flex: none;
  width: 76px;
  height: auto;
  border-radius: 3px;
}
.footer-motto {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.footer-motto > span:not(.phrase) {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.site-footer .footer-company address {
  margin-top: 20px;
  font-style: normal;
  font-size: 13.5px;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.8);
}
.site-footer .footer-license {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.68);
}
.site-footer .footer-license b {
  font-weight: 700;
  color: #fff;
}
.footer-privacy-mark {
  display: inline-block;
  margin-top: 24px;
  padding: 8px;
  background: #fff;
}
.footer-privacy-mark img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.site-footer .footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-content: start;
}
.site-footer .footer-nav ul {
  display: grid;
  gap: 14px;
  grid-template-columns: none;
}
.site-footer .footer-nav a {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}
.site-footer .footer-nav a:hover {
  text-decoration: underline;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom a {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.footer-bottom a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer-bottom .footer-up {
  margin-left: auto;
}
@media (max-width: 760px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-bottom .footer-up {
    margin-left: 0;
  }
}
.site-footer .footer-nav ul {
  align-content: start;
}
/* 上のメニューと同じまとまりの3列(2026-11-13 yuki「合わせる」)。まとまりの名前は押せない小さな見出し */
.site-footer .footer-nav {
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  column-gap: 32px;
}
.footer-nav-group {
  display: grid;
  gap: 14px;
  align-content: start;
}
.footer-nav-title {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}
.footer-nav-group > .footer-nav-title:first-child {
  margin-top: 0;
}
@media (max-width: 760px) {
  .site-footer .footer-nav {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    row-gap: 28px;
  }
}
.site-footer .nowrap {
  white-space: nowrap;
}

/* 相談の欄: 部屋の写真をセクション全体の背景に敷く。左の明るい壁の上に文字を置く(2026-10-28) */
.section-contact .contact-photo {
  inset: 0;
}
.section-contact .contact-photo img {
  object-position: center;
  filter: none;
}
.section-contact .contact-photo::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0) 65%
  );
}
@media (max-width: 760px) {
  .section-contact .contact-photo {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
  }
  .section-contact .contact-photo img {
    object-position: 75% center;
  }
  .section-contact .contact-photo::before {
    content: none;
  }
}

/* トップの「ご相談からご提案までの流れ」: 矢印は白から少しずつ黄緑に染まり、最後の 04 で黄緑になる(2026-11-04、たいちが3案から案 b を選んだ)。
   前のチャコール地は「真っ暗」なのでやめた。地は .section-flow の明るいグレーのまま */
.page-top .section-flow .flow-phase-end::after {
  height: 2px;
  background: var(--brand-green);
}
.page-top .section-flow .flow-step:nth-child(2) .flow-body {
  background: #eef6de;
}
.page-top .section-flow .flow-step:nth-child(3) .flow-body {
  background: #d6ebaa;
}
.page-top .section-flow .flow-step:nth-child(4) .flow-body {
  background: var(--brand-green);
  color: var(--color-text);
}
.page-top .section-flow .flow-step-decide .flow-body p {
  color: #2c3a14;
}
.page-top .section-flow .flow-pin::after {
  box-shadow: 0 0 0 3px var(--color-soft);
}

/* ===== スクロールで出てくる動き(main.js が対象に .reveal を付け、画面に入ると .is-shown) ===== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.reveal.reveal-from-left {
  transform: translateX(-48px);
}
.reveal.reveal-from-right {
  transform: translateX(48px);
}
.reveal.reveal-wipe {
  transform: none;
  clip-path: inset(-10% 100% -10% 0);
  transition:
    opacity 0.6s var(--ease),
    clip-path 1.2s var(--ease);
}
.reveal.is-shown {
  opacity: 1;
  transform: none;
}
.reveal.reveal-wipe.is-shown {
  clip-path: inset(-10% -2% -10% 0);
}
/* 写真は滑り込みながら、中の画像が少し引いていく */
.reveal-from-left img,
.reveal-from-right img {
  transform: scale(1.08);
  transition: transform 1.6s var(--ease);
}
.reveal-from-left.is-shown img,
.reveal-from-right.is-shown img {
  transform: none;
}
/* 中央寄せの見出しは、線の飾りごと出す */
.section-title-center.reveal-wipe {
  clip-path: inset(-10% 100% -10% 0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}
/* 横から滑り込む途中で横スクロールが出ないようにする */
main {
  overflow-x: clip;
}

/* 表紙の文字の出し方(2026-10-28): 上から順に出すのをやめ、全部いっしょに、ふわっと浮き出させる
   2026-11-06 カクカクするとの指摘で、ぼかし(filter)の動きをやめた。ぼかしは1コマごとに文字を描き直すので重い。
   画面の描き直しが要らない opacity と transform だけで動かし、動かす距離と時間も少し増やして、なめらかに見せる */
@keyframes hero-soft-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.hero-eyebrow,
.hero-title,
.hero-lead,
.hero-actions,
.hero-philosophy {
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.hero-ready .hero-eyebrow,
.hero-ready .hero-title,
.hero-ready .hero-lead,
.hero-ready .hero-actions,
.hero-ready .hero-philosophy {
  animation: hero-soft-in 1.6s 0.3s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-ready .hero-eyebrow,
  .hero-ready .hero-title,
  .hero-ready .hero-lead,
  .hero-ready .hero-actions,
  .hero-ready .hero-philosophy {
    animation: none;
    opacity: 1;
  }
}

/* 幅の狭いカードの中は両端揃えにしない(2026-10-28)
   両端揃えと「まとめて折り返す語句」が重なると、画面の幅によって「を　並　べ　て」のように字間が大きく開くため */
.flow-body p,
.photo-card-body p,
.why-item > p,
.info-card p,
.plan-card p,
.consult-card p,
.article-text,
.voice-text,
.trust-fact,
.appraisal-notes li {
  text-align: left;
}
/* 最後の行に1〜2文字だけ残る折り返しを避ける */
.flow-body p {
  text-wrap: pretty;
}
/* 流れの図の説明は、言葉の途中で折り返さない */
.flow-body p {
  word-break: auto-phrase;
}

/* ===== メニューのドロップダウン: ヘッダーの下に全幅で広がるパネル(2026-10-28) =====
   左にグループ名と一言、右に各ページの名前と短い説明。ふわっと下りてくる */
.site-header .header-inner {
  position: relative;
}
.global-nav .has-sub {
  position: static;
}
.global-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 0;
  padding: 0;
  background: var(--color-menu-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 0;
  border-top: 1px solid var(--color-header-line);
  box-shadow: 0 24px 48px rgba(20, 21, 22, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.4s var(--ease),
    visibility 0.3s;
}
.global-nav .has-sub:hover .sub-menu,
.global-nav .has-sub:focus-within .sub-menu,
.global-nav .has-sub.is-open .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* クリックやフォーカスで開いたまま別のメニューにマウスを乗せたときは、乗せた方だけを出す
   (全幅のパネルが2枚重なり、下のパネルがはみ出して見えるため) */
.global-nav:has(.has-sub:hover) .has-sub:not(:hover) .sub-menu {
  opacity: 0;
  visibility: hidden;
}
.sub-menu-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  width: min(100% - 64px, var(--container));
  margin-inline: auto;
  padding: 36px 0 40px;
}
/* 見出しの右の縦線はロゴの緑(2026-11-04) */
.sub-menu-head {
  padding-top: 10px;
  padding-right: 32px;
  border-right: 2px solid var(--brand-green);
}
/* メニューの中の文字は、見出し・項目名・説明文ともヘッダーと同じゴシック体に揃える(2026-11-04) */
.sub-menu-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.sub-menu-lead {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-header-sub);
}
.sub-menu-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 24px;
}
/* 項目にマウスを乗せる・キーボードで選ぶと、枠は動かずに背景がグレーになり、項目名が大きく浮き上がる(2026-11-04)。
   左の線は出さない(たいちの判断) */
.global-nav .sub-menu-list a {
  display: block;
  padding: 14px 16px 14px 18px;
  white-space: normal;
  text-decoration: none;
  transition: background-color 0.3s;
}
.global-nav .sub-menu-list a:hover,
.global-nav .sub-menu-list a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.sub-menu-list b {
  position: relative;
  display: block;
  width: fit-content;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  transform-origin: left bottom;
  transition:
    transform 0.45s var(--ease),
    text-shadow 0.45s var(--ease);
}
/* 項目名の下の緑の線。乗せた時に左から引かれる */
.sub-menu-list b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--brand-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease) 0.05s;
}
.sub-menu-list small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-header-sub);
  transition: transform 0.45s var(--ease) 0.05s;
}
.sub-menu-lead,
.sub-menu-list small {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 項目名を大きく浮かせて濃い影を付け、文字が前に出てくるように見せる。説明文も少しだけ後を追う */
.global-nav .sub-menu-list a:hover b,
.global-nav .sub-menu-list a:focus-visible b {
  transform: translateY(-7px) scale(1.04);
  text-shadow: 0 10px 18px rgba(0, 0, 0, 0.6);
}
.global-nav .sub-menu-list a:hover b::after,
.global-nav .sub-menu-list a:focus-visible b::after {
  transform: scaleX(1);
}
.global-nav .sub-menu-list a:hover small,
.global-nav .sub-menu-list a:focus-visible small {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .global-nav .sub-menu-list b,
  .global-nav .sub-menu-list b::after,
  .global-nav .sub-menu-list small {
    transition: none;
  }
  .global-nav .sub-menu-list a:hover b,
  .global-nav .sub-menu-list a:focus-visible b,
  .global-nav .sub-menu-list a:hover small,
  .global-nav .sub-menu-list a:focus-visible small {
    transform: none;
  }
}
/* 開いているメニューの名前に下線。クリック後の黒い四角い枠は出さない(キーボード操作のときだけ枠を出す) */
.global-nav .sub-toggle {
  position: relative;
}
.global-nav .sub-toggle::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.global-nav .has-sub:hover .sub-toggle::before,
.global-nav .has-sub.is-open .sub-toggle::before {
  transform: scaleX(1);
}
.global-nav .sub-toggle:focus:not(:focus-visible) {
  outline: none;
}
.global-nav .sub-toggle::after {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.global-nav .has-sub:hover .sub-toggle::after,
.global-nav .has-sub.is-open .sub-toggle::after {
  transform: rotate(180deg);
}
.global-nav:has(.has-sub:hover) .has-sub:not(:hover) .sub-toggle::before {
  transform: scaleX(0);
}
.global-nav:has(.has-sub:hover) .has-sub:not(:hover) .sub-toggle::after {
  transform: none;
}

/* ===== スマホの手直し(2026-10-28) ===== */
@media (max-width: 760px) {
  /* 6つの理由: 縦1列になると 03・04 のグレーが続くので、黒→白→グレー→白→グレー→黒 と交互にする */
  .why-item:nth-child(4) {
    background: var(--color-card);
    border-color: var(--color-line);
  }
  .why-item:nth-child(4) .why-no {
    color: var(--color-line-strong);
  }
  .why-item:nth-child(5) {
    background: var(--color-sand);
    border-color: var(--color-sand);
  }
  .why-item:nth-child(5) .why-no {
    color: var(--color-accent);
  }

  /* 流れ: 「ここで判断いただけます」を 04 のカードの真下にくっつけ、上向きの三角で 04 を指す */
  .flow-step-decide {
    flex-wrap: wrap;
  }
  .flow-pin {
    flex-basis: 100%;
    margin: 0 0 0 68px;
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
  .flow-pin::before {
    display: block;
    content: "";
    left: 50%;
    bottom: 100%;
    width: 0;
    height: 0;
    background: none;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid var(--color-text);
    transform: translateX(-50%);
  }
  .flow-pin::after {
    display: none;
  }

  /* 相談の欄: 見出しと説明を写真の上に重ねる */
  .section-contact {
    padding-block: 0 40px;
  }
  .section-contact .contact-photo {
    position: absolute;
    inset: 0 0 auto 0;
    height: 360px;
    aspect-ratio: auto;
  }
  .section-contact .contact-photo img {
    object-position: 70% center;
  }
  .section-contact .contact-photo::before {
    content: "";
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.6) 60%,
      rgba(243, 244, 248, 1) 100%
    );
  }
  .section-contact .contact-inner {
    margin-top: 0;
    padding-top: 48px;
  }
  .section-contact .contact-text {
    min-height: 280px;
  }
}
@media (max-width: 760px) {
  .why-grid {
    grid-auto-rows: auto;
  }
}

/* ===== AI賃料査定へのボタンを目立たせる =====
   いちばん押してほしい導線なので、他のボタンより大きくする。
   黒いボタンの縁を、ロゴの黄緑の光がゆっくり一周する(2026-11-04、たいちが3案から案 a を選んだ。前の「光が横切る」は安直なのでやめた)。
   表紙・広告の中・ほかのページの査定ボタンと、スマホ下の固定バーの査定で同じ動きにそろえる。動きを減らす設定の端末では止める */
:root {
  --brand-green: #90d018;
}
@property --cta-orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* 黒地に黄緑の光が縁を回る見た目。ページ内の査定ボタン・ヘッダーの相談・スマホ下の固定ボタンの査定で共有する */
:is(
  main a.btn[href*="satei"],
  main a.sw-band-card[href*="satei"],
  .header-actions .btn-primary,
  .mobile-cta-bar a[href*="satei"]
) {
  position: relative;
  color: #fff;
  /* 枠は透明にして、下の2枚目の地(回る黄緑の光)を枠の幅だけ見せる */
  border: 2px solid transparent;
  background:
    linear-gradient(#141414, #141414) padding-box,
    conic-gradient(
      from var(--cta-orbit),
      #3d3f3f 0deg,
      #3d3f3f 250deg,
      var(--brand-green) 320deg,
      #eaffc4 340deg,
      #3d3f3f 360deg
    )
    border-box;
  animation: cta-orbit 4.5s linear infinite;
}
main a.btn[href*="satei"] {
  min-height: 60px;
  padding: 14px 36px;
  gap: 14px;
  font-size: 16.5px;
  transition:
    box-shadow 0.3s ease,
    transform 0.2s var(--ease);
}
main a.btn[href*="satei"]:hover,
main a.btn[href*="satei"]:focus-visible {
  box-shadow:
    0 0 0 4px rgba(144, 208, 24, 0.18),
    0 10px 26px rgba(144, 208, 24, 0.28);
}
@keyframes cta-orbit {
  to {
    --cta-orbit: 360deg;
  }
}
/* ヘッダーの無料相談も、同じ黒地に黄緑の光が回るボタンにする(大きさはヘッダーに合わせたまま。2026-11-06 たいち) */
.header-actions .btn-primary {
  transition: box-shadow 0.3s ease;
}
.header-actions .btn-primary:hover,
.header-actions .btn-primary:focus-visible {
  box-shadow:
    0 0 0 4px rgba(144, 208, 24, 0.18),
    0 10px 26px rgba(144, 208, 24, 0.28);
}
/* スマホ下の固定バーの査定も、ページ内の査定ボタンと同じ見た目(上の共有の決まり)。たいち 11/08「合わせたら?」 */
/* 止めた時も、縁の右上に黄緑の光が残る */
@media (prefers-reduced-motion: reduce) {
  :is(
    main a.btn[href*="satei"],
    main a.sw-band-card[href*="satei"],
    .header-actions .btn-primary,
    .mobile-cta-bar a[href*="satei"]
  ) {
    animation: none;
  }
}
@media (max-width: 760px) {
  main a.btn[href*="satei"] {
    width: 100%;
    justify-content: center;
  }
}
/* 査定の欄のボタンは大きくする */
.appraisal-actions a.btn[href*="satei"] {
  min-width: 380px;
  min-height: 70px;
  font-size: 18px;
  letter-spacing: 0.1em;
}
@media (max-width: 760px) {
  .appraisal-actions a.btn[href*="satei"] {
    min-width: 0;
  }
}

/* 入力中はスマホ下の固定ボタンを隠す(site.js が .hide を付ける。キーボードと重ならないように) */
.mobile-cta-bar.hide {
  display: none !important;
}

/* ===== 際立たせる文字は明朝(決まりは :root の「書体の決まり」) =====
   共通の見出しの部品はここに集める。後から読まれる pages.css の共通部品は、そちらで同じ変数を使う */
.hero-title,
.hero-philosophy,
.section-title,
.section-title-center,
.split-title,
.appraisal-title,
.trust-title,
.contact-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
}

/* ===== スマホの流れの章を、なるべく1画面に収める(2026-11-12 泰地「フローをもう少し小さくして1つの画面に。文字を小さくしすぎるのはなし」) =====
   トップ・管理サービス・乗り換え・空室・採用の「流れ」(どれも id="flow")。縦の流れのまま、番号・カードの内側の余白・行間・段の間を詰める。
   説明の字は 14px を下回らない。パソコンは変えない */
@media (max-width: 760px) {
  main #flow {
    padding-block: 40px 44px;
  }
  /* 前の章の「次の章へ」の丸いボタン(管理サービスの .mng-next)は、この章の上の余白に重ねて置く作り。
     ボタンの分の余白はほかの章と同じだけ残す(詰めると見出しに重なる。2026-11-12 泰地「文字被ってる」) */
  main .mng-next + #flow {
    padding-top: calc(var(--section-space) + 64px);
  }
  main #flow .flow-step {
    gap: 8px;
  }
  main #flow :is(.section-head, .section-head-row, .section-title, .section-lead) {
    margin-bottom: 14px;
  }
  main #flow .flow-no,
  main #flow .flow-step:first-child .flow-no {
    min-width: 30px;
    margin: 10px 0 0;
    font-size: 26px;
  }
  main #flow .flow-body,
  main #flow .flow-step:first-child .flow-body {
    margin: 0 0 -12px;
    padding: 10px 14px 20px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px));
  }
  main #flow .flow-step:not(:first-child) .flow-body {
    padding-top: 20px;
  }
  main #flow .flow-step:last-child .flow-body {
    margin-bottom: 0;
    padding-bottom: 12px;
    clip-path: none;
  }
  main #flow .flow-body h3 {
    margin-bottom: 2px;
    font-size: 16.5px;
    line-height: 1.4;
  }
  main #flow .flow-body p {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.55;
  }
  main #flow .flow-tag {
    font-size: 12.5px;
    line-height: 1.5;
  }
  /* 段階の帯(ご相談・調査/ご提案)は残したまま、前後の余白だけ詰める */
  main #flow .section-head-row {
    margin-bottom: 10px;
  }
  main #flow .section-head-row .section-lead {
    margin-bottom: 0;
  }
  main #flow .flow-phase {
    font-size: 14.5px;
    line-height: 1.4;
  }
  main #flow .flow-phase-main {
    margin-bottom: 8px;
  }
  main #flow .flow-phase-end {
    margin: 10px 0 8px;
  }
  /* トップは「ご提案」の帯のすぐ後に最後の段が来る。上の段の矢印が重ならないので上の余白を小さく */
  .page-top main #flow .flow-step:last-child .flow-body {
    padding-top: 12px;
  }
  main #flow .flow-pin {
    margin-top: 6px;
  }
  main #flow .flow-body p {
    line-height: 1.5;
  }
}

/* ===== パソコン幅の大きさ(2026-11-13 yuki「80% で見た時を 100% の標準に。上のメニューの帯は今のまま」) =====
   1101px 以上では、中身(main)・フッター・タイトルの帯(page-pin)だけを 0.8 倍で描く。ヘッダーとお知らせの帯は縮めない。
   縮めた中では --header-height を 64 ÷ 0.8 にして、上に貼り付く物と飛び先が、縮めないヘッダー(64px)の真下に来るようにする */
@media (min-width: 1101px) {
  main,
  .site-footer,
  .page-pin {
    --page-zoom: 0.8;
    --header-height: calc(64px / var(--page-zoom));
    zoom: var(--page-zoom);
  }
}

/* ===== 写真の所は 100% の時と同じ見え方に(2026-11-13 yuki「100％の時の画像の感じで行けへんの？」) =====
   文字・ボタン・カードは 0.8 倍のまま、画面幅いっぱいの写真の所の高さだけ 100% の時に戻す(写真の切れ方・粗さを 100% と同じにする)。
   ① 高さが決まっている所(トップの表紙・下層の見出し帯・賃貸経営ニュースの帯)は、高さを 0.8 で割り戻す
   ② 中の文で高さが決まる帯(相談の帯・6つの理由・賃料査定・お問い合わせの写真・店舗の帯)は、帯ごと 100% に戻し、中身だけ 0.8 倍にする */
@media (min-width: 1101px) {
  main {
    --page-hero-height: calc(340px / var(--page-zoom));
    --page-hero-height-compact: calc(280px / var(--page-zoom));
  }
  /* トップの表紙は、80%にする前(2026-11-13 の昼より前)の見え方のまま描く(yuki 11/13「表紙…80％にしてっていう前に戻せ」)。
     表紙だけ 0.8 倍を打ち消し(0.8 × 1.25 = 1)、中の --page-zoom も 1 にして、top.css の 15.5vw・12vw を元の値に戻す。
     高さ・文字・ロゴの大きさは元の .hero の決まりのまま */
  main .hero {
    --page-zoom: 1;
    --header-height: 64px;
    zoom: 1.25;
  }
  main .nl-hero {
    min-height: calc(320px / var(--page-zoom));
  }
  main
    :is(
      .section-why,
      .nx-band,
      .section-appraisal,
      .section-contact,
      .page-cta.has-photo,
      .recruit-cta
    ) {
    --header-height: 64px;
    zoom: calc(1 / var(--page-zoom));
  }
  main
    :is(
      .section-why,
      .nx-band,
      .section-appraisal,
      .section-contact,
      .page-cta.has-photo,
      .recruit-cta
    )
    > :not(.contact-photo, .page-cta-photo, .recruit-cta-photo) {
    --header-height: calc(64px / var(--page-zoom));
    zoom: var(--page-zoom);
  }
}