/* トップページ固有の見た目。共通の部品は style.css にあり、このファイルはその後に読み込まれる。
   ここに置くのは 2026-11-04 にたいちが案から選んだ、表紙のロゴ・お悩み・店舗の章・6つの理由・管理業務の見た目 */

/* ===== カードがふわっと浮き上がる動き(管理サービスのページと同じ値) ===== */
:root {
  --lift-y: -6px;
  --lift-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
  --lift-transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* ===== 1. 表紙のロゴ: 写真の左上に、白い社名+緑のマークとアパマンショップの青地のロゴ(2026-11-07 たいち) =====
   左の端は見出しにそろえる。板は敷かず、影で写真から浮かせる */
.hero-logos {
  position: absolute;
  z-index: 15;
  top: clamp(40px, 5vw, 72px);
  left: clamp(32px, 5.5vw, 88px);
  display: flex;
  align-items: center;
  gap: 22px;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.25));
  opacity: 0;
  transition: opacity 1.2s 0.6s var(--ease);
}
.hero-ready .hero-logos {
  opacity: 1;
}
.hero-logo-nehayas {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-logo-mark {
  width: auto;
  height: 32px;
}
.hero-logo-word {
  width: auto;
  height: 18px;
}
.hero-logos-divider {
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.75);
}
.hero-logo-apaman {
  width: 140px;
  height: auto;
  border-radius: 4px;
}
/* 高さの低い画面でも、見出しの塊が左上のロゴにぶつからないよう少し下げる */
@media (min-width: 761px) {
  .hero-content {
    padding-top: 112px;
  }
}
/* タブレットの幅は説明が3行になるので、表紙を少し高くしてボタンと企業理念の文を離す */
@media (min-width: 761px) and (max-width: 1000px) {
  .hero {
    min-height: 620px;
  }
}
@media (max-width: 760px) {
  /* スマホは写真が上(高さ 75vw)。ロゴを写真の左上に置く。左の端は見出しにそろえる */
  .hero-logos {
    top: 34px;
    left: 20px;
    gap: 10px;
  }
  .hero-logo-nehayas {
    gap: 6px;
  }
  .hero-logo-mark {
    height: 20px;
  }
  .hero-logo-word {
    height: 11px;
  }
  .hero-logos-divider {
    height: 30px;
  }
  .hero-logo-apaman {
    width: 88px;
    border-radius: 3px;
  }
  .hero-eyebrow {
    top: calc(75vw - 98px);
  }
}
/* 「賃貸物件オーナー様へ」を見出しに寄せる(2026-11-07 たいち) */
@media (min-width: 761px) {
  .hero-eyebrow {
    margin-bottom: 4px;
  }
}
/* 幅の狭いスマホは見出しが3行になるので、写真からはみ出さないよう上へ逃がす */

/* 表紙の見出しだけ、他の文とは別の動きにする(2026-11-07 たいち「差別化、公式感」)。
   他の文は下から浮かび、各章の見出しは左から拭き取るように出る。ここだけは動かさず、
   1行ずつ、ぼけた文字にゆっくりピントが合うように現れる。動きを減らす設定の人には最初から見せる */
.hero-title-line {
  display: block;
}
.hero-ready .hero-title {
  animation: none;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-ready .hero-title-line {
    transform-origin: left center;
    animation: hero-title-focus 2s 0.5s ease-out both;
  }
  .hero-ready .hero-title-line + .hero-title-line {
    animation-delay: 1s;
  }
}
@keyframes hero-title-focus {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* 締めの相談の章: 見出しの上に2つのロゴ(2026-11-07 たいち)。明るい写真の上なので社名は黒い字の公式ロゴを使う */
.section-contact .contact-text {
  max-width: 600px;
}
.contact-logos {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.contact-logo-nehayas {
  width: auto;
  height: 28px;
}
.contact-logos-divider {
  flex: none;
  width: 1px;
  height: 40px;
  background: var(--color-text-sub);
}
.contact-logo-apaman {
  width: 96px;
  height: auto;
  border-radius: 4px;
}
/* 右の白い箱に押されて文の幅が狭くなる幅でも、ロゴを1列に収める */
@media (max-width: 1000px) {
  .contact-logos {
    gap: 12px;
  }
  .contact-logo-nehayas {
    height: 22px;
  }
  .contact-logo-apaman {
    width: 76px;
  }
}
@media (max-width: 760px) {
  .contact-logos {
    gap: 12px;
    margin-bottom: 14px;
  }
  .contact-logo-nehayas {
    height: 20px;
  }
  .contact-logos-divider {
    height: 28px;
  }
  .contact-logo-apaman {
    width: 70px;
    border-radius: 3px;
  }
}

/* ===== 2. お悩み: 左に問いかけ、右に写真カード4枚(2026-11-06 たいちの見本) ===== */
.trouble-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.trouble-heading {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1.45;
  letter-spacing: 0.06em;
}
.trouble-heading em {
  color: var(--brand-green);
  font-size: 1.22em;
  line-height: 1;
  font-style: normal;
}
/* 章の見出しの要の言葉1つだけ黄緑にする。指定は「お悩み」の見出しと同じ(2026-11-07 たいち) */
:is(.section-title, .section-title-center, .about-title) em {
  color: var(--brand-green);
  font-size: 1.22em;
  line-height: 1;
  font-style: normal;
}
.trouble-lead {
  margin-top: 20px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-text-sub);
}
.trouble-actions {
  margin-top: 28px;
}
.trouble-actions .btn {
  width: 100%;
}
.trouble-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.trouble-features li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 10px;
  padding-inline: 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
/* 文字の入る所は欄の幅いっぱいに(Safari で中身の一番狭い幅まで縮み、1字ずつ縦に並んでいた。2026-11-09 たいち) */
.trouble-features li > span {
  justify-self: stretch;
}
/* 幅400までの狭い画面は、3つを横に並べると1欄が文字6つ分ほどしかなく、2〜3字ずつ折れて縦書きのように見える。
   印を左・文字を右にした横長の3段にし、文字は1行で読めるようにする(文字の大きさは変えない) */
@media (max-width: 400px) {
  .section-trouble .trouble-features {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .section-trouble .trouble-features li {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 10px;
    padding: 6px 4px;
    text-align: left;
  }
  .section-trouble .trouble-features li + li {
    border-left: 0;
    border-top: 1px solid var(--color-line);
  }
  .section-trouble .trouble-features li > span br {
    display: none;
  }
}
.trouble-features li + li {
  border-left: 1px solid var(--color-line);
}
.trouble-features svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trouble-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* カード: 写真の下に、オーナー様の言葉の吹き出し。分類(空室・入居対策など)は下の小さな札(2026-11-08 たいちが B 案に決定) */
.trouble-cards a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.trouble-cards img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform 0.6s var(--ease);
}
/* 人物が右にいる横長の写真は、顔が切れないよう右寄りで切り取る(2026-11-08 たいちの差し替え) */
.trouble-cards img.trouble-photo-right {
  object-position: 82% 40%;
}
.trouble-body {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}
.trouble-tag {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trouble-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-green);
}
.trouble-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 幅360までの狭い画面では、長い題(相続・空き家の活用など)が札の外へ出ないよう折り返す */
@media (max-width: 360px) {
  .trouble-tag .trouble-label {
    white-space: normal;
  }
}
.trouble-label {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--brand-green);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.trouble-title {
  position: relative;
  justify-self: stretch;
  margin-top: -22px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 20, 20, 0.14);
  font-size: clamp(18px, 1.65vw, 21px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  transform-origin: left bottom;
  transition: transform 0.3s var(--ease);
}
/* 吹き出しの口(写真を指す) */
.trouble-title::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 18px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
}
.trouble-text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-sub);
}
.trouble-cards a:is(:hover, :focus-visible) {
  transform: translateY(var(--lift-y));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}
.trouble-cards a:is(:hover, :focus-visible) img {
  transform: scale(1.05);
}
.trouble-cards a:is(:hover, :focus-visible) .trouble-title {
  transform: scale(1.08);
}
@media (max-width: 1000px) {
  .trouble-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .trouble-cards a,
  .trouble-cards img,
  .trouble-title {
    transition: none;
  }
  .trouble-cards a:is(:hover, :focus-visible),
  .trouble-cards a:is(:hover, :focus-visible) img,
  .trouble-cards a:is(:hover, :focus-visible) .trouble-title {
    transform: none;
  }
}

/* ===== 3. 店舗と法人ネットワーク: 章ごと小さくする =====
   写真を端まで敷かず、写真の横に見出しと本文、2つの窓口は下に横1列。
   章の地は全幅で敷き、中身は他の章と同じ幅に収める */
.section-split-fit {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto auto;
  column-gap: clamp(32px, 4vw, 56px);
  row-gap: 0;
  align-items: start;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 56px var(--gutter);
  box-sizing: border-box;
  box-shadow: 0 0 0 100vmax var(--color-primary);
  clip-path: inset(0 -100vmax);
}
.section-split-fit .split-text {
  display: contents;
}
.section-split-fit .split-photo {
  grid-column: 1;
  grid-row: 1 / 6;
  align-self: center;
  aspect-ratio: 1480 / 1062;
  border-radius: 10px;
}
.section-split-fit .split-photo::before {
  display: none;
}
.section-split-fit .split-photo img {
  border-radius: 10px;
}
.section-split-fit :is(.split-title, .split-subtitle, .split-lead) {
  grid-column: 2;
}
.section-split-fit .split-title {
  margin-bottom: 10px;
}
/* 「店舗紹介」の下の説明(たいち 11/07「サブタイトル的な」) */
.split-subtitle {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.section-split-fit .split-lead {
  font-size: 15px;
  line-height: 1.9;
}
.section-split-fit .split-lead:not(:last-of-type) {
  margin-bottom: 8px;
}
.section-split-fit .split-lead:last-of-type {
  margin-bottom: 0;
}
/* 2店舗の広告(たいち 11/08)。章の下に横並び。押すと店の募集物件のページを新しいタブで開く */
.shop-ads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-split-fit .shop-ads {
  grid-column: 1 / -1;
  grid-row: 6;
  margin-top: 40px;
}
.shop-ads a {
  display: block;
  border-radius: 6px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.shop-ads img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.shop-ads a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}
.shop-ads a:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .shop-ads a {
    transition: none;
  }
  .shop-ads a:hover {
    transform: none;
  }
}
@media (max-width: 900px) {
  .section-split-fit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .section-split-fit :is(.split-photo, .split-title, .split-subtitle, .split-lead, .shop-ads) {
    grid-column: 1;
    grid-row: auto;
  }
  /* 写真は元の縦横比のまま(店名の札が切れないように) */
  .section-split-fit .split-photo {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 24px;
    aspect-ratio: 1480 / 1062;
  }
}
@media (max-width: 760px) {
  .section-split-fit {
    padding: 40px 20px 44px;
  }
  .section-split-fit .split-lead {
    font-size: 14px;
  }
  /* スマホの横並びでは広告の中の文字が潰れるので、縦2段にする */
  .shop-ads {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .section-split-fit .shop-ads {
    margin-top: 28px;
  }
}
/* 一番狭い端末でも、2行の見出しが画面からはみ出さない大きさにする */
@media (max-width: 360px) {
  .split-subtitle {
    font-size: 15px;
    letter-spacing: 0.02em;
  }
}

/* 賃貸経営ニュースの章を黒の地にする(2026-11-07 たいち「モノトーン感、黒は欲しい」)。下の明るい章が続く真ん中で締める。
   カードは白いままなので、文字の色を変えるのは題・説明・ボタンだけ */
.section-learn {
  background: var(--color-footer);
  color: #fff;
}
.section-learn .section-title {
  color: #fff;
}
.section-learn .section-lead {
  color: var(--color-header-sub);
}
.section-learn .learn-actions .btn-outline {
  color: #fff;
  border-color: #fff;
}
.section-learn .learn-actions .btn-outline:hover {
  background: #fff;
  color: var(--color-text);
}
/* 流れの章を店舗紹介と同じ色の地にする(2026-11-07 たいち)。矢印の札の中の文字は今の色のまま */
.section-flow {
  background: var(--color-primary);
}
.section-flow .section-title,
.section-flow .flow-phase,
.section-flow .flow-no {
  color: #fff;
}
.section-flow .section-lead {
  color: var(--color-dark-text-sub);
}
.section-flow .flow-phase::after {
  background: #fff;
}
.section-flow .flow-pin {
  background: #fff;
  color: var(--color-text);
}
@media (min-width: 761px) {
  .section-flow .flow-pin::before,
  .section-flow .flow-pin::after {
    background: #fff;
  }
  .section-flow .flow-pin::after {
    box-shadow: 0 0 0 2px var(--color-primary);
  }
}
/* ===== 4. 選ばれる6つの理由: 部屋の写真を敷き、半透明のカードを重ねる =====
   市松の色分けはやめ、6枚を同じ作りにする */
.section-why {
  position: relative;
  background:
    linear-gradient(rgba(20, 21, 22, 0.72), rgba(20, 21, 22, 0.82)),
    url("/img/new/hero-3-living-indirect-light.webp") center / cover;
  color: #fff;
}
.section-why .section-title-center {
  color: #fff;
}
.section-why .section-title-center::after {
  background: var(--brand-green);
}
.section-why .why-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 32px 30px;
  transition: var(--lift-transition);
}
.section-why .why-item:hover {
  transform: translateY(var(--lift-y));
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--brand-green);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .section-why .why-item:hover {
    transform: none;
  }
}
.section-why .why-item .why-no {
  display: inline-block;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--color-text);
  background: var(--brand-green);
  border-radius: 999px;
  padding: 7px 14px 6px;
  margin-bottom: 18px;
}
/* 題だけ大きくして、ページを見た時に6つの理由がぱっと分かるようにする(2026-11-06 たいち)。本文の大きさは変えない */
.section-why .why-item h3 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 25px;
  line-height: 1.45;
  margin-bottom: 12px;
  word-break: auto-phrase;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .section-why .why-item h3 {
    font-size: 22px;
  }
}
.section-why .why-item > p:not(.why-no) {
  color: rgba(255, 255, 255, 0.82);
}
/* 文のかたまりの部品(sentence-wrap.js)がコメントだけの空の入れ物を作り、1行分の隙間になるのを消す */
.section-why .why-item > .sentence:empty {
  display: none;
}
/* スマホだけの短い説明(2026-11-08 たいち「説明文は省くより短く端的にわかりやすく」)。パソコンは今の長い説明のまま */
.section-why .why-item > .why-short {
  display: none;
}

/* 管理サービスの見出し: 管理サービスのページの帯の題と同じ形(2026-11-07 たいち)。
   明るい地なので、黄緑のマークと黒い社名が1枚になった公式ロゴを使う。大きさと比率は帯の題にそろえる */
main .section-service .section-title.top-service-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(36px, 3.4vw, 50px);
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.top-service-title img {
  flex: none;
  width: auto;
  height: 1.1em;
}
@media (max-width: 760px) {
  /* スマホ: 1行に収まらないので、ロゴの下に「管理サービス」を置く */
  main .section-service .section-title.top-service-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
    font-size: 34px;
    line-height: 1.25;
  }
  .top-service-title img {
    height: 0.95em;
  }
}

/* 「オーナー様に、誠実に向き合うために。」: どの幅でも1行。文の塊を右の列いっぱいに広げ、右の空きをなくす(2026-11-07 たいち) */
.about-text {
  max-width: none;
  padding-right: clamp(32px, 4vw, 64px);
  container-type: inline-size;
}
main .section-about .about-text .about-title {
  font-size: min(32px, 5cqi);
  white-space: nowrap;
}

/* スマホでも題を2行に収める。7.2vw は「まず今の家賃を確かめる」が幅いっぱいに入る大きさ */
@media (max-width: 760px) {
  main .section-appraisal .section-title.appraisal-section-title {
    font-size: 7.2vw;
  }
}

/* ===== 5. 管理業務: 写真を大きく、下に「詳しく見る」 ===== */
.service-more {
  display: none;
}
.section-service .photo-card > a {
  border-radius: 12px;
  overflow: hidden;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.section-service .photo-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
}
.section-service .photo-card-body p:not(.card-sub) {
  margin-bottom: 14px;
}
.section-service .service-more {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  font-weight: 700;
}
.section-service .service-more::after {
  content: "→";
  color: var(--brand-green);
}
@media (max-width: 760px) {
  /* style.css のスマホの「写真左 110px」をやめ、写真を上に大きく置く */
  .section-service .photo-card > a {
    display: flex;
  }
  .section-service .photo-card-image {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
}

/* 管理内容・相続のご相談: 左に写真(仮の写真) */
.section-service .consult-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  padding: 0 28px 0 0;
  overflow: hidden;
  border-radius: 12px;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.section-service .consult-card-image {
  grid-row: 1 / -1;
  overflow: hidden;
  background: var(--color-sand);
}
.section-service .consult-card-image img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}
.section-service .consult-card h3 {
  padding-top: 24px;
}
.section-service .consult-card .text-arrow {
  justify-self: start;
  margin-bottom: 22px;
}
@media (max-width: 760px) {
  .section-service .consult-card {
    grid-template-columns: 110px 1fr;
    column-gap: 16px;
    padding: 0 16px 0 0;
  }
  .section-service .consult-card h3 {
    padding-top: 16px;
  }
  .section-service .consult-card .text-arrow {
    margin-bottom: 16px;
  }
}

/* 2つの管理プラン: 手本は管理サービスのページの「こんな方は」のカード(.mng-fit)。
   普段は2枚とも同じ白・同じ重み。マウスを当てた方だけ黒くなる(下の「いま見ているプラン」) */
.section-service .top-plan-pair {
  gap: 28px;
  margin-top: 36px;
}
.section-service .top-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 36px 30px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--brand-green);
}
.section-service .top-plan-badge {
  position: absolute;
  top: -16px;
  left: 36px;
  padding: 4px 16px;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.section-service .top-plan-head {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.section-service .top-plan-head b {
  font-size: 24px;
  letter-spacing: 0.06em;
}
.section-service .top-plan-checks {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.section-service .top-plan-checks li {
  position: relative;
  padding: 10px 14px 10px 46px;
  background: var(--color-soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}
/* 四角の中のチェック */
.section-service .top-plan-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;
}
.section-service .top-plan-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);
}
.section-service .top-plan-answer {
  margin-top: 22px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--brand-green);
  font-size: 15px;
  line-height: 1.9;
  text-align: left;
}
.section-service .top-plan-memo {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-sub);
  text-align: left;
}
/* リンクはカードの一番下にそろえる */
.section-service .top-plan-link {
  align-self: flex-start;
  margin-top: auto;
}
.section-service .top-plan-answer,
.section-service .top-plan-memo {
  margin-bottom: 18px;
  word-break: auto-phrase;
}
.section-service .top-plan-answer:has(+ .top-plan-memo) {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .section-service .top-plan-pair {
    gap: 36px;
    margin-top: 32px;
  }
  .section-service .top-plan {
    padding: 32px 22px 24px;
  }
  .section-service .top-plan-badge {
    left: 22px;
  }
  .section-service .top-plan-head b {
    font-size: 20px;
  }
  .section-service .top-plan-checks li {
    font-size: 14px;
  }
}

/* いま見ているプラン: マウスを当てた方を、元のサブリースの黒にして少し浮かせる(2026-11-06 たいち)。
   色は .mng-fit-card.is-sublease と同じ。キーボードで当てた時も同じ。マウスの無い端末は白のまま。
   太さを変えると文の折り返しが動いて枠の高さが変わるので、色と影と位置だけを変える。
   カードにはスクロールで出てくる動き(.reveal)も付いているので、浮く動きはそちらの transform と
   別の translate で作り、出てくる動きの opacity と transform はそのまま残す */
@media (hover: hover) {
  .section-service .top-plan {
    transition:
      opacity 0.9s var(--ease),
      transform 0.9s var(--ease),
      translate 0.3s ease,
      box-shadow 0.3s ease,
      background-color 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease;
  }
  /* main.js が2枚目に付ける出番の遅れを、当てた時の反応に持ち越さない */
  .section-service .top-plan.is-shown {
    transition-delay: 0s !important;
  }
  .section-service .top-plan-head b,
  .section-service .top-plan-checks li,
  .section-service .top-plan-checks li::before,
  .section-service .top-plan-memo {
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease;
  }
  .section-service .top-plan:is(:hover, :focus-within) {
    translate: 0 var(--lift-y);
    background: var(--color-primary);
    border-color: var(--color-primary);
    border-top-color: var(--brand-green);
    color: #fff;
    box-shadow: var(--lift-shadow);
  }
  .section-service .top-plan:is(:hover, :focus-within) .top-plan-head b {
    color: var(--brand-green);
  }
  .section-service .top-plan:is(:hover, :focus-within) .top-plan-checks li {
    background: rgba(255, 255, 255, 0.08);
  }
  .section-service .top-plan:is(:hover, :focus-within) .top-plan-checks li::before {
    border-color: var(--brand-green);
  }
  .section-service .top-plan:is(:hover, :focus-within) .top-plan-memo {
    color: var(--color-dark-text-sub);
  }
  .section-service .top-plan:is(:hover, :focus-within) a:focus-visible {
    outline-color: #fff;
  }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .section-service .top-plan,
  .section-service .top-plan-head b,
  .section-service .top-plan-checks li,
  .section-service .top-plan-checks li::before,
  .section-service .top-plan-memo {
    transition: none;
  }
  .section-service .top-plan:is(:hover, :focus-within) {
    translate: none;
  }
}

/* 管理業務のカード: マウスを乗せると、カードと一緒に文字も浮かび上がる(2026-11-06 たいち)。
   メニューの項目と同じ動き。題が大きく前に出て、説明文が少し後を追う */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .section-service .photo-card-body :is(h3, p, .service-more) {
    transform-origin: left bottom;
    transition:
      transform 0.45s var(--ease),
      text-shadow 0.45s var(--ease),
      color 0.3s ease;
  }
  .section-service .photo-card > a:is(:hover, :focus-visible) h3 {
    transform: translateY(-5px) scale(1.07);
    text-shadow: 0 8px 16px rgba(20, 21, 22, 0.22);
  }
  .section-service .photo-card > a:is(:hover, :focus-visible) p {
    transform: translateY(-3px);
    color: var(--color-text);
  }
  .section-service .photo-card > a:is(:hover, :focus-visible) .service-more {
    transform: translateY(-2px);
  }
}

/* 際立たせる文字は明朝(決まりは style.css の :root) */
.section-service .top-plan-head b {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
}

/* 査定書: 後ろの白い台紙をやめて、紙だけを写真の上に浮かせる(2026-11-06 たいち)。
   「利用 無料」の丸が紙の角に付くよう、枠の幅を紙に合わせる */
.section-appraisal .appraisal-visual {
  justify-self: center;
  width: min(100%, 372px);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 主なお取引社宅代行様: 現行サイトと同じ、十字の線で区切った2列(2026-11-06 たいち) */
.section-partners .partners-lead {
  text-align: center;
}
.partners-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "relo tokyu"
    "syataku starts"
    "syataku apaman"
    "livero tns";
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.partners-table > li {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--color-line-strong);
}
.partners-table > :is(.is-relo, .is-syataku, .is-livero) {
  border-right: 1px solid var(--color-line-strong);
}
.partners-table > :is(.is-livero, .is-tns) {
  border-bottom: 0;
}
.partners-table .is-relo {
  grid-area: relo;
}
.partners-table .is-tokyu {
  grid-area: tokyu;
}
.partners-table .is-syataku {
  grid-area: syataku;
  gap: 20px;
}
.partners-table .is-starts {
  grid-area: starts;
}
.partners-table .is-apaman {
  grid-area: apaman;
}
.partners-table .is-livero {
  grid-area: livero;
}
.partners-table .is-tns {
  grid-area: tns;
}
.partners-table > li > img {
  width: auto;
  max-width: min(100%, 360px);
  max-height: 100px;
  object-fit: contain;
}
.partners-feature {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: 100%;
}
.partners-feature img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}
.partners-feature-text p {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
.partners-feature-text a {
  position: relative;
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  padding: 6px 28px 6px 14px;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.partners-feature-text a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.partners-feature-text a:is(:hover, :focus-visible) {
  background: var(--color-primary);
  color: #fff;
}
@media (max-width: 760px) {
  .partners-table {
    grid-template-areas:
      "relo tokyu"
      "syataku syataku"
      "starts apaman"
      "livero tns";
  }
  .partners-table > li {
    min-height: 96px;
    padding: 16px 12px;
  }
  .partners-table > .is-syataku {
    border-right: 0;
  }
  .partners-table > .is-starts {
    border-right: 1px solid var(--color-line-strong);
  }
  .partners-table > li > img {
    max-height: 72px;
  }
  .partners-feature {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
  }
  .partners-feature-text p {
    font-size: 12px;
    text-align: left;
  }
  .partners-feature-text a {
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 10px 24px;
    font-size: 12px;
  }
  .partners-feature-text a::after {
    right: 10px;
  }
}

/* 査定書を少し右へ。4つの点は白枠をやめ、黒地に黄緑のチェック(2026-11-06 たいち) */
@media (min-width: 1001px) {
  .section-appraisal .appraisal-visual {
    justify-self: end;
  }
}
.section-appraisal .appraisal-points li {
  gap: 12px;
  border: 0;
  border-left: 3px solid var(--brand-green);
  border-radius: 8px;
  background: var(--color-primary);
  box-shadow: none;
  color: #fff;
}
.section-appraisal .appraisal-points li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 14px;
  margin: -3px 4px 0 2px;
  border-right: 2px solid var(--brand-green);
  border-bottom: 2px solid var(--brand-green);
  transform: rotate(45deg);
}

/* 6つの理由: 題に黄緑の下線を引いて目立たせる(2026-11-06 たいち) */
.section-why .why-item h3 {
  text-decoration: underline;
  text-decoration-color: var(--brand-green);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  line-height: 1.6;
}

/* 査定の章の題は2行に収める */
/* 章の題と、その下の問いかけ(2026-11-07 たいち「タイトルがない」)。題が先に目に入る大きさの順にする */
.section-appraisal .appraisal-section-title {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
}
.section-appraisal .appraisal-title {
  font-size: clamp(18px, 1.7vw, 22px);
}
/* スマホは「管理を考える前に、/まず今の家賃を確かめる」の2行で折る(2026-11-09 たいち「まずが1行目に来てるのがキモい」)。
   2行目(11字・字間込み 約12.2字分)が幅に入る大きさにする */
@media (max-width: 760px) {
  main .section-appraisal h2.section-title.appraisal-section-title {
    font-size: min(7.2vw, calc((100vw - 40px) / 12.4));
  }
  .section-appraisal .appraisal-section-title .keep {
    display: block;
    white-space: nowrap;
  }
}
/* 幅の狭いスマホでも、問いかけの2行が途中で折れない大きさにする */
@media (max-width: 360px) {
  .section-appraisal .appraisal-title {
    font-size: 16px;
  }
}

/* スマホの表紙: 後から出すのは写真の上の題とロゴだけ。説明とボタンは最初から見せる(2026-11-06 たいち) */
@media (max-width: 760px) {
  .hero-content {
    pointer-events: auto;
  }
  .hero-content > .hero-lead,
  .hero-content > .hero-actions,
  .hero-philosophy,
  .hero-ready .hero-lead,
  .hero-ready .hero-actions,
  .hero-ready .hero-philosophy {
    animation: none;
    opacity: 1;
  }
}

/* 6つの理由: どの題も1行に収まる大きさにそろえる(2026-11-06 たいち) */
@media (min-width: 1101px) {
  .section-why .why-item h3 {
    font-size: clamp(24px, 2vw, 28px);
    white-space: nowrap;
    word-break: normal;
  }
}
@media (max-width: 1100px) {
  .section-why .why-item h3 {
    font-size: 22px;
  }
}
@media (max-width: 760px) {
  .section-why .why-item h3 {
    font-size: 20px;
  }
}

/* オーナー様に、誠実に向き合うために: 左に写真、右に見出しと表組み(2026-11-06 たいちの見本) */
.section-about {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  align-items: center;
  background: #f6f6f5;
}
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.about-text {
  max-width: 720px;
  padding: 56px var(--gutter) 56px clamp(32px, 4vw, 64px);
}
.about-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.about-lead {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.95;
}
.about-rows {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}
.about-rows li {
  display: grid;
  grid-template-columns: 40px 158px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding-block: 14px;
  border-bottom: 1px solid var(--color-line);
}
.about-rows svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-rows b {
  font-size: 14.5px;
  letter-spacing: 0.04em;
}
.about-rows p {
  padding-left: 16px;
  border-left: 1px solid var(--color-line-strong);
  font-size: 13px;
  line-height: 1.75;
}
.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.about-actions .btn {
  flex: 1 1 200px;
}
@media (max-width: 1000px) {
  .section-about {
    grid-template-columns: minmax(0, 1fr);
  }
  .about-text {
    max-width: none;
    padding: 36px var(--gutter) 44px;
  }
}
@media (max-width: 620px) {
  .about-rows li {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: 6px;
  }
  .about-rows p {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }
}

/* 「オーナー様に、誠実に向き合うために。」: どの幅でも1行。文の塊を右の列いっぱいに広げ、右の空きをなくす(2026-11-07 たいち) */
.about-text {
  max-width: none;
  padding-right: clamp(32px, 4vw, 64px);
  container-type: inline-size;
}
main .section-about .about-text .about-title {
  font-size: min(32px, 5cqi);
  white-space: nowrap;
}

/* 狭いスマホでは、査定の4つの点を1列にして文のはみ出しを防ぐ */
@media (max-width: 360px) {
  .section-appraisal .appraisal-points {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 管理サービスの見出し: 管理サービスのページの帯の題と同じ形(2026-11-07 たいち)。
   明るい地なので、黄緑のマークと黒い社名が1枚になった公式ロゴを使う。大きさと比率は帯の題にそろえる */
main .section-service .section-title.top-service-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(36px, 3.4vw, 50px);
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.top-service-title img {
  flex: none;
  width: auto;
  height: 1.1em;
}
@media (max-width: 760px) {
  /* スマホ: 1行に収まらないので、ロゴの下に「管理サービス」を置く */
  main .section-service .section-title.top-service-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
    font-size: 34px;
    line-height: 1.25;
  }
  .top-service-title img {
    height: 0.95em;
  }
}

/* 「オーナー様に、誠実に向き合うために。」: どの幅でも1行。文の塊を右の列いっぱいに広げ、右の空きをなくす(2026-11-07 たいち) */
.about-text {
  max-width: none;
  padding-right: clamp(32px, 4vw, 64px);
  container-type: inline-size;
}
main .section-about .about-text .about-title {
  font-size: min(32px, 5cqi);
  white-space: nowrap;
}

/* スマホでも題を2行に収める。7.2vw は「まず今の家賃を確かめる」が幅いっぱいに入る大きさ */
@media (max-width: 760px) {
  main .section-appraisal .section-title.appraisal-section-title {
    font-size: 7.2vw;
  }
}

/* 章の見出しの要の言葉1つだけ黄緑にする。指定は「お悩み」の見出しと同じ(2026-11-07 たいち) */
:is(.section-title, .section-title-center, .about-title) em {
  color: var(--brand-green);
  font-size: 1.22em;
  line-height: 1;
  font-style: normal;
}

/* 締めの見出し: どの幅でも2行(2026-11-07 たいち)。18.4 は長い方の行の幅(17字+字間)。白い箱と間の 428px を引いた残りに収める */
main .section-contact .contact-text .contact-title {
  font-size: min(
    40px,
    calc((min(100vw, var(--container) + var(--gutter) * 2) - var(--gutter) * 2 - 428px) / 18.4)
  );
  letter-spacing: 0.06em;
}
.section-contact .contact-text {
  max-width: none;
}
@media (max-width: 900px) {
  /* 横に並べると文字が小さくなりすぎるので、白い箱を下へ送る */
  .section-contact .contact-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  main .section-contact .contact-text .contact-title {
    font-size: calc((100vw - var(--gutter) * 2) / 18.4);
  }
  .section-contact .contact-box {
    width: auto;
  }
}

/* 賃貸経営ニュースの章を黒の地にする(2026-11-07 たいち「モノトーン感、黒は欲しい」)。下の明るい章が続く真ん中で締める。
   カードは白いままなので、文字の色を変えるのは題・説明・ボタンだけ */
.section-learn {
  background: var(--color-footer);
  color: #fff;
}
.section-learn .section-title {
  color: #fff;
}
.section-learn .section-lead {
  color: var(--color-header-sub);
}
.section-learn .learn-actions .btn-outline {
  color: #fff;
  border-color: #fff;
}
.section-learn .learn-actions .btn-outline:hover {
  background: #fff;
  color: var(--color-text);
}

/* 流れの章を店舗紹介と同じ色の地にする(2026-11-07 たいち)。矢印の札の中の文字は今の色のまま */
.section-flow {
  background: var(--color-primary);
}
.section-flow .section-title,
.section-flow .flow-phase,
.section-flow .flow-no {
  color: #fff;
}
.section-flow .section-lead {
  color: var(--color-dark-text-sub);
}
.section-flow .flow-phase::after {
  background: #fff;
}
.section-flow .flow-pin {
  background: #fff;
  color: var(--color-text);
}
@media (min-width: 761px) {
  .section-flow .flow-pin::before,
  .section-flow .flow-pin::after {
    background: #fff;
  }
  .section-flow .flow-pin::after {
    box-shadow: 0 0 0 2px var(--color-primary);
  }
}

/* ===== スマホの直し(2026-11-08 たいち・iPhone 17 Pro で確認) =====
   表紙: ロゴを消し、題を上げ、実績の数字を写真の中へ。企業理念は写真の右に縦書き。
   お悩み: 題を1行、説明はパソコンと同じ、3つの推しを小さく、カードを2×2、査定のボタンはカードの下 */
.hero-stats {
  display: none;
}
@media (max-width: 760px) {
  .hero-logos,
  .stats {
    display: none;
  }
  /* 写真(高さ 75vw)の中の並び: 小見出し → 題 → 実績の数字。題は「大切な資産に、/いまも、これからも安心を。」の2行
     (2026-11-08 たいち「今の配置はいいから2行に」)。右の縦書きの企業理念(幅 約60px)の分は空ける。
     f は2行目が1行に収まる大きさ: 13字 × 字間込み1.1 = 14.3字分 */
  .hero {
    --hero-f: min(24px, calc((100vw - 96px) / 14.3));
  }
  /* 小見出し(約30px)+題(2行 = f × 3.1)のかたまりを、写真の上下の真ん中(37.5vw)にそろえる
     (2026-11-09 たいち「もうちょい上、真ん中寄りにしてほしい」) */
  .hero-title {
    right: 76px;
    font-size: var(--hero-f);
    line-height: 1.55;
    top: calc(37.5vw + 15px - var(--hero-f) * 1.55);
  }
  .hero-eyebrow {
    top: calc(37.5vw - 15px - var(--hero-f) * 1.55);
  }
  /* 実績の数字: 写真の一番下に、札を使わず3つ横並び(2026-11-08 たいちの見本どおり)。
     大きな明朝の白い数字+小さな単位、その下に小さなゴシックの説明。3つの間に細い白の縦線。高さ 56px(説明の下に「2025年時点」の行がある) */
  .hero-stats {
    position: absolute;
    z-index: 14;
    top: calc(75vw - 66px);
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 1s 0.6s var(--ease);
  }
  .hero-ready .hero-stats {
    opacity: 1;
  }
  .hero-stats li {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    height: 56px;
    white-space: nowrap;
  }
  .hero-stats li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.85);
  }
  .hero-stats b {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: min(24px, 6vw);
    line-height: 1.05;
    letter-spacing: 0;
  }
  .hero-stats small {
    margin-left: 2px;
    font-family: var(--font-sans);
    font-size: 0.5em;
    font-weight: 700;
  }
  /* 数え上げる数字の部品は、下の説明(span)の字の決まりを受けず、数字の大きさ・書体のまま */
  .hero-stats b .hero-stat-num {
    font: inherit;
    letter-spacing: inherit;
  }
  /* パソコンの実績の帯と同じく、管理戸数と入居率に「2025年時点」を添える(2026-11-10 帆足常務。年に1回の更新) */
  /* 「2025年時点」は説明の下の行に小さく(横に並べると幅 375 以下で欄からはみ出すため。2026-11-10) */
  .hero-stats-note {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    font-style: normal;
    letter-spacing: 0.02em;
    opacity: 0.9;
  }
  .hero-stats span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.06em;
  }
  /* 数字が読みやすいよう、写真の下の方を少し暗くする */
  .hero-photo::after {
    background: linear-gradient(
      180deg,
      rgba(20, 21, 22, 0) 40%,
      rgba(20, 21, 22, 0.45) 72%,
      rgba(20, 21, 22, 0.78) 100%
    );
  }
  /* 企業理念: 写真の右上から縦書き。数字の行には掛からない高さに収める */
  html .hero-philosophy {
    position: absolute;
    z-index: 14;
    top: 14px;
    right: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    writing-mode: vertical-rl;
    font-size: min(13px, calc((75vw - 78px) / 18));
    line-height: 1.8;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 1.2s 0.9s var(--ease);
  }
  html .hero-ready .hero-philosophy {
    opacity: 1;
  }

  /* お悩み: 題 → 短い説明 → 3つの推し → カード → 査定のボタン */
  .trouble-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .trouble-intro {
    display: contents;
  }
  /* 題はパソコンと同じ文言。「賃貸経営で、こんなお悩みは/ありませんか？」の2行。1行目(13字・字間込み)が幅に収まる大きさ */
  .trouble-heading {
    order: 1;
    font-size: calc((100vw - 40px) / 14.6);
    white-space: nowrap;
  }
  .trouble-lead-long {
    order: 2;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.8;
  }
  .trouble-features {
    order: 3;
    margin-top: 14px;
  }
  .trouble-features li {
    gap: 4px;
    font-size: 12px;
    line-height: 1.45;
  }
  .trouble-features svg {
    width: 24px;
    height: 24px;
  }
  .trouble-cards {
    order: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }
  .trouble-actions {
    order: 5;
    margin-top: 18px;
  }
  .trouble-cards a {
    border-radius: 10px;
  }
  .trouble-body {
    flex: 1;
    grid-template-rows: auto 1fr;
    gap: 8px;
    padding: 0 10px 12px;
  }
  /* 吹き出しが2行と3行のカードが横に並んでも、下の札は同じ高さ(カードの下端)にそろえる */
  .trouble-tag {
    align-self: end;
  }
  .trouble-title {
    margin-top: -18px;
    padding: 8px 10px;
    font-size: 14.5px;
    line-height: 1.4;
  }
  /* カードの説明はパソコンと同じ文を出す(2026-11-08 たいち「省いて分かりづらくなるのはダメ」) */
  .trouble-text {
    font-size: 12.5px;
    line-height: 1.7;
  }
  .trouble-tag {
    gap: 6px;
  }
  .trouble-icon {
    width: 24px;
    height: 24px;
  }
  .trouble-icon svg {
    width: 15px;
    height: 15px;
  }
  .trouble-label {
    font-size: 12px;
    border-bottom-width: 1px;
  }
  /* 幅 389 以下は札が1行に収まるよう、字間を詰めて少しだけ小さく */
  @media (max-width: 389px) {
    .trouble-label {
      font-size: 11.5px;
      letter-spacing: 0;
      white-space: nowrap;
    }
  }
}

/* ===== 店舗紹介(2026-11-08 たいち): 文を左・写真を右に。地は薄いグレー(お悩みの章の白とは分ける)。
   題を大きくし、文と写真もそれに合わせて大きくする。下の2店舗の広告はそのまま ===== */
main #reason.section-split-fit {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-line) 55%, #fff);
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--color-line) 55%, #fff);
}
main #reason.section-split-fit .split-photo {
  grid-column: 2;
}
main #reason.section-split-fit :is(.split-title, .split-subtitle, .split-lead) {
  grid-column: 1;
}
main #reason.section-split-fit .split-title {
  margin-bottom: 14px;
  font-size: clamp(40px, 3.8vw, 54px);
  white-space: normal;
}
main #reason.section-split-fit .split-subtitle {
  margin-bottom: 20px;
  font-size: clamp(20px, 1.8vw, 25px);
}
main #reason.section-split-fit .split-lead {
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--color-text-sub);
}
@media (max-width: 900px) {
  main #reason.section-split-fit {
    grid-template-columns: minmax(0, 1fr);
  }
  main #reason.section-split-fit :is(.split-photo, .split-title, .split-subtitle, .split-lead) {
    grid-column: 1;
  }
  /* 縦に並ぶ時は、題と文を先に、写真をその下に */
  main #reason.section-split-fit .split-photo {
    order: 4;
    max-width: none;
    margin: 24px 0 0;
  }
  main #reason.section-split-fit .split-title {
    order: 1;
    font-size: 34px;
  }
  main #reason.section-split-fit .split-subtitle {
    order: 2;
    font-size: 19px;
  }
  main #reason.section-split-fit .split-lead {
    order: 3;
    font-size: 15px;
  }
  main #reason.section-split-fit .shop-ads {
    order: 5;
  }
}
@media (max-width: 360px) {
  main #reason.section-split-fit .split-subtitle {
    font-size: 17px;
  }
}

/* 6つの理由の題: 文字そのものを大きく太く(2026-11-08 たいち)。下線は元の細さ */
main .section-why .why-item h3 {
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* 共通の大きさの指定(sizes.css)より強く書く。パソコンは前の約1.4倍 */
@media (min-width: 1101px) {
  main .section-why .why-item h3 {
    font-size: 28px;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  main .section-why .why-item h3 {
    font-size: 23px;
  }
}

/* ===== スマホのカード類(2026-11-08 たいち「縦に並んでるのやめて。横に並べて見やすく」)。
   ただし説明文は出す(2026-11-08 たいち「省いて分かりづらくなるのはダメ。合わせろ」)。
   6つの理由だけは、たいちの決め(「説明文は省くより短く端的にわかりやすく」)どおり2列+短い説明。
   管理業務とご相談の6枚は、たいち「2×3 にできないの」(11/09)で2列×3段。説明は出したまま、カードを縦長にして収める。
   流れの章は縦のまま。パソコンは今のまま ===== */
@media (max-width: 760px) {
  /* 管理業務とご相談の6枚: 2列×3段。パソコンと同じく写真の上に題と説明を重ねる。説明が3〜4行入るよう縦長(3:4) */
  main .section-service .mng-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  main .section-service .mng-cards a {
    aspect-ratio: 3 / 4;
  }
  main .section-service .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%
    );
  }
  main .section-service .mng-cards-body {
    right: 10px;
    bottom: 12px;
    left: 10px;
    gap: 6px;
  }
  main .section-service .mng-cards-title {
    font-size: 15.5px;
    letter-spacing: 0.04em;
  }
  main .section-service .mng-cards-text {
    font-size: 12.5px;
    line-height: 1.6;
    letter-spacing: 0;
  }

  /* 6つの理由: 2列×3段。番号・題・短い説明。
     横に並ぶ2枚で、番号・題・説明の段の高さをそろえる(題が2行のカードがあっても説明の書き出しが同じ高さ) */
  main .section-why .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 8px;
  }
  main .section-why .why-item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
    padding: 14px 12px 16px;
  }
  main .section-why .why-item .why-no {
    justify-self: start;
    margin-bottom: 10px;
    padding: 4px 10px 3px;
    font-size: 12px;
  }
  main .section-why .why-item h3 {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    white-space: normal;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
  }
  main .section-why .why-item > .why-short {
    display: block;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    /* 行の長さをそろえる指定(pretty)は、Safari では2行で入る文も3行に割ってしまうので外す */
    text-wrap: wrap;
  }
  main .section-why .why-item > :not(.why-no, h3, .why-short) {
    display: none;
  }
  /* 幅 399 以下(360〜393): 説明が2行に収まるよう、字を少し小さく、字間を詰める */
  @media (max-width: 399px) {
    main .section-why .why-item {
      padding-inline: 10px;
    }
    main .section-why .why-item > .why-short {
      font-size: 12px;
      letter-spacing: 0;
    }
  }
  /* 幅 340 以下(320 など)は2列だと説明が3行に割れ、最後の1字だけが次の行に残るので1列にする */
  @media (max-width: 340px) {
    main .section-why .why-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* 会社の4項目は元の縦の並び(説明つき)のまま。2列にすると本社の住所だけ背が高くなり、
     4枚の高さと中身がそろわなかった(2026-11-08 たいち「変に細かくまとめすぎて崩れてるなら戻せ」) */

  /* 改善事例の3枚: 横に並べて指で送る。説明もパソコンと同じに出す */
  main .section-cases .cases-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  main .section-cases .case-list-card {
    scroll-snap-align: start;
  }

  /* 記事の2枚は元の縦の並びのまま。2列だと長い題が細かく折れて、短い題のカードの下が空いた
     (2026-11-08 たいち「変に細かくまとめすぎて崩れてるなら戻せ」) */

  /* 表紙の2つのボタンはパソコンと同じ見た目(2026-11-08 たいち「スマホになるとデザイン変わってる。合わせろ」)。
     共通の style.css がスマホで「管理物件のご相談」を灰色の地にしていたのを、パソコンと同じ白い地・黒い字・黒い枠に戻す。
     高さもパソコンと同じく2つそろえる */
  .hero .hero-actions .btn-white {
    background: #fff;
    color: var(--color-text);
    border-color: var(--color-text);
  }
  .hero .hero-actions .btn {
    min-height: 60px;
  }
}

/* 言葉の途中で折らない(2026-11-10 たいち)。phrase-wrap.js が、文節の切れ目に折る印(<wbr>)を入れた所にだけ付く印。
   Safari など word-break: auto-phrase の効かないブラウザーで、印の所と句読点でだけ折る。1つの文節が枠より長い時だけ途中で折る */
/* 全ページ共通の方針(2026-11-10)に合わせ、句で折る指定が効かないブラウザー(Safari)の時だけ効かせる */
/* 2026-11-12: 幅 1100px 以下では Chromium でも印を入れるので、ブラウザーで分けない(印はスクリプトが入れた所にだけ付く)。
   ページの見出しなどの auto-phrase より強くする */
main .phrase-wrapped,
main .phrase-wrapped * {
  word-break: keep-all !important;
  overflow-wrap: anywhere;
}
/* 数字(「2,000」)と開きかっこ+次の1字は、途中で折らない */
main .phrase-glue {
  white-space: nowrap;
}

/* ===== パソコンの表紙: 左のかたまり(ロゴ・小見出し・題・説明・ボタン)と右の企業理念を、画面の真ん中寄りに(2026-11-10 たいちの赤枠の見本) =====
   見本(幅 約1890)では、左のかたまりの左端が画面の約15.5%、企業理念の右端が右から約12%。文字の大きさ・文言・写真は変えない
   画面の幅の割合(vw)は、パソコン幅で中身を縮めた分(--page-zoom。style.css の最後)で割り戻し、縮めても画面に対する位置を変えない */
@media (min-width: 1100px) {
  .hero-logos {
    left: calc(15.5vw / var(--page-zoom, 1));
  }
  .hero-content {
    margin-left: calc(15.5vw / var(--page-zoom, 1));
  }
  .hero-philosophy {
    right: calc(12vw / var(--page-zoom, 1));
  }
}

/* ===== スマホ・タブレットの再総点検(2026-11-10 たいち「まだ崩れてる。いろんな端末で崩れないように」)のトップの直し ===== */
/* g1-1: 幅 340 以下は管理業務のカードの中身(題+説明)が縦長のカードに入りきらず、題が上に切れるので、カードをもう少し縦長に */
@media (max-width: 340px) {
  main .section-service .mng-cards a {
    aspect-ratio: 5 / 8;
  }
}
/* g1-2・g1-3: タブレット・横向き(761〜1199)では、お悩みと会社紹介の前文の改行(パソコンの <br>)を使わず、幅いっぱいに流す。
   改行が入ると文のかたまりがその長さに縮み、Safari では少し足りずに「が/あります。」「つ/なぎます。」と折れるため */
@media (min-width: 761px) and (max-width: 1199px) {
  .trouble-lead br.pc-only,
  .about-lead br.pc-only {
    display: none;
  }
}
/* g1-4: 「サービスの詳細を見る」を縮めず1行に */
main .section-service .section-head-row > .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* g1-5: 「利用 無料」の丸い札を、報告書の題(「…レポート」の「ト」)にかからない高さへ上げる。札の下端を紙の上の縁の少し下までに */
main .section-appraisal .appraisal-free {
  top: -70px;
}
@media (max-width: 760px) {
  main .section-appraisal .appraisal-free {
    top: -58px;
  }
  /* 上げた札が、上の注意書きに重ならないよう紙の上を空ける */
  main .section-appraisal .appraisal-visual {
    margin-top: 52px;
  }
}
/* g1-7: 査定の札は行の長さをそろえる指定(balance)を外す。Safari ではそろえた折れ目が言葉の途中に来るため */
main .section-appraisal .appraisal-points li {
  text-wrap: wrap;
}
/* g1-9: 幅 340 以下は事例カードの地名と物件の種類を横に並べると、種類の欄が狭く「マンショ/ン」と折れるので、種類を次の行に回す */
@media (max-width: 340px) {
  main .section-cases .case-list-meta {
    flex-wrap: wrap;
  }
  main .section-cases .case-list-type {
    flex-basis: 100%;
    margin: 2px 0 0;
    padding-left: 20px;
  }
  main .section-cases .case-list-type::before {
    display: none;
  }
}
/* g1-11: 幅 360 以下でお悩みの札が折り返す時、行の長さをそろえる指定(pretty)で「管理/体制の/見直し」と3行にならないよう、普通に折る(2行) */
main .trouble-tag .trouble-label {
  text-wrap: wrap;
}
/* g1-16: 横向きの低い画面(高さ 500 以下)では、表紙を画面の高さに収まる大きさにし、題やオープニングの字が下で切れないようにする */
@media (min-width: 761px) and (max-height: 500px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-block: 20px 28px;
  }
  .hero-content {
    padding-top: 64px;
  }
  .hero-logos {
    top: 20px;
  }
}

/* 流れの段階の帯(ご相談・調査/ご提案)を、スマホ・タブレットでもパソコンと同じ見た目(白い太字+横線)で出す(2026-11-12 測り直し top#2。
   たいち 11/9「PC にある説明はスマホでも同じデザインで」)。縦に並んだ段の前に置く: 01〜03 の前に「ご相談・調査」、04 の前に「ご提案」 */
@media (max-width: 1100px) {
  .section-flow .flow-chart {
    display: flex;
    flex-direction: column;
  }
  .section-flow .flow-phases,
  .section-flow .flow-list {
    display: contents;
  }
  .section-flow .flow-phase-main {
    order: 0;
    margin-bottom: 14px;
  }
  .section-flow .flow-step {
    order: 1;
  }
  .section-flow .flow-phase-end {
    order: 2;
    margin: 34px 0 14px;
  }
  .section-flow .flow-step:last-child {
    order: 3;
  }
}

/* ===== スマホの「賃貸経営ニュース」: 記事のカードを縦に積まず、改善事例と同じく横に並べて指で送る(2026-11-12 泰地「縦に並んでんの嫌だな」)。
   カードの中身(写真・分類の札・題・説明)とパソコンの見た目は変えない ===== */
@media (max-width: 760px) {
  main .section-learn .column-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  main .section-learn .column-list > li {
    scroll-snap-align: start;
  }
}

/* 6つの理由の題の黄緑の下線を、題の中の折れない塊(.keep・句の塊 .phrase)にも引く(2026-11-12 泰地「法人500社だけにひかれてるの変」)。
   下線(text-decoration)は箱(inline-block)の中まで届かないので、箱にも同じ下線を付ける。題を書き直しても同じ見た目になる */
.section-why .why-item h3 :is(.keep, .phrase, .phrase-tail) {
  text-decoration: inherit;
}

/* 管理サービスの見出しを「ネハヤス管理サービス」の1つの言葉に(2026-11-13 泰地「NEHAYAS をカタカナにして統一」)。
   英字の社名の入ったロゴをやめ、葉の印だけを題の前に置き、字は見出しと同じ大きさ・書体・色。管理サービスのページの題(fix/mng-title-1113)と同じ決まり。
   幅が足りない時は「ネハヤス/管理サービス」の間でだけ折る */
main .section-service .section-title.top-service-title {
  display: block;
}
main .section-service .section-title.top-service-title img {
  display: inline-block;
  width: auto;
  height: 0.72em;
  margin-right: 0.3em;
  vertical-align: -0.02em;
}
/* スマホ: 1行目は葉の印だけ、2行目に「ネハヤス管理サービス」を1行で(2026-11-13 泰地「ネハヤスは下にして」)。
   字はパソコンと同じ見出しの 34px。10字(字間込み 約10.6字分)が幅に入らない狭い画面だけ、入る大きさまで小さくする */
@media (max-width: 760px) {
  main .section-service .section-title.top-service-title {
    font-size: min(34px, calc((100vw - 40px) / 10.6));
    line-height: 1.35;
    white-space: nowrap;
  }
  main .section-service .section-title.top-service-title img {
    display: block;
    height: 24px;
    margin: 0 0 6px;
  }
}