/* 下層ページ共通の部品(トップと同じ色・文字・余白の決まりで作る)
   色・文字は style.css の :root の変数だけを使う。ページ固有の調整は assets/pages/<ページ名>.css に書く */

/* ===== ページの見出し帯 ===== */
/* 帯の高さはトップ以外の全ページで同じ(たいち 11/07「帯のサイズは合わせて」)。ページごとに高さを決めない。
   文字が増えて収まらない時は、切らずに帯のほうが伸びる */
:root {
  --page-hero-height: 340px;
  --page-hero-pad-top: 48px; /* 題の高さ。全ページ同じ */
}
@media (max-width: 760px) {
  :root {
    --page-hero-height: 420px;
    --page-hero-pad-top: 40px;
  }
}
.page-hero,
.page-hero.is-plain {
  min-height: var(--page-hero-height);
}
/* 題と短い説明だけのページ(改善事例・よくあるご質問・お問い合わせ・規約など)は、低い帯にそろえる。
   高さは賃貸経営ニュースの帯くらい(たいち 11/13「文字に対して帯広いやつだけ短くして、長さページごとに統一」)。
   低い帯どうしは全部同じ高さ。ページごとに高さを決めない。文字が収まらない時は帯のほうが伸びる */
:root {
  --page-hero-height-compact: 280px;
}
@media (max-width: 760px) {
  :root {
    --page-hero-height-compact: 260px;
  }
}
.page-hero.is-compact {
  min-height: var(--page-hero-height-compact);
}
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  color: #fff;
  background: var(--color-primary);
  overflow: hidden;
}
.page-hero-photo {
  position: absolute;
  inset: 0;
}
.page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 帯の写真をゆっくり少しずつ寄せて戻す(たいち 11/07「ちょっとずつ動かすとか」)。
   荒くならないよう寄せるのは 6% まで。採用の帯は別の動きがあるので外す */
@keyframes page-hero-photo-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.page-recruit) .page-hero-photo img {
    animation: page-hero-photo-drift 24s ease-in-out infinite alternate;
  }
}
/* 人の顔が帯から切れやすい写真は、顔の高さを見せる(src/data/pageHeroPhotos.ts の focus: 'top') */
.page-hero-photo img.is-focus-top {
  object-position: 50% 46%;
}
.page-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 21, 22, 0.72) 0%,
    rgba(20, 21, 22, 0.45) 55%,
    rgba(20, 21, 22, 0.2) 100%
  );
}
.page-hero-inner {
  position: relative;
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding: var(--page-hero-pad-top) 0 24px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}
/* 各ページの題の動き(たいち 11/07「そんな派手じゃなくていい」)。開いた時に一度だけ、ふわっと浮き出る。
   カクつかないよう、トップの表紙と同じく opacity と transform だけで動かす */
@keyframes page-title-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero h1,
  .thanks-title {
    animation: page-title-in 1s var(--ease) 0.1s both;
  }
}
/* 規約の4ページは、題と帯の写真も動かさない(たいち 11/08「アニメーションなくして」。本文の動きは main.js で止める) */
body:is(.page-privacy, .page-privacy_disclosure, .page-privacy_policy, .page-harassment)
:is(.page-hero h1, .page-hero-photo:not(.shop-hero-slides) img) {
  animation: none;
}
/* 章の大見出し(たいち 11/07「トップとか含めて全部」「ただ黒字でこのくらいでかければ目立つ」)。
   大きさの見本はトップの「賃貸経営で、こんなお悩みはありませんか？」(top.css の .trouble-heading)。黄緑は付けない。
   後から読まれるページごとの指定に負けないよう、:is の中に一番強い書き方も並べている */
main
:is(
  .section-title,
  .section-title-center,
  .split-title,
  .about-title,
  .contact-title,
  .page-cta h2,
  .page-cta.has-photo h2,
  .section-split-fit .split-title,
  .section-appraisal .appraisal-section-title
) {
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1.45;
  letter-spacing: 0.06em;
}
main .section-title-center::after {
  content: none;
}
/* 一番狭いスマホでも、句の途中で画面からはみ出さない大きさにする */
@media (max-width: 360px) {
  main
    :is(
      .section-title,
      .section-title-center,
      .split-title,
      .about-title,
      .contact-title,
      .page-cta h2,
      .page-cta.has-photo h2,
      .section-split-fit .split-title,
      .section-appraisal .appraisal-section-title
    ) {
    font-size: 26px;
  }
}
/* 大きくした見出しの直後に罫線が来る所は、文字が線に付かないよう間を空ける */
.section-title + .faq-list {
  margin-top: 24px;
}
/* 見出しの①②(管理サービスの「このページの流れ」と同じ順) */
.chapter-num {
  margin-right: 0.3em;
}
.page-hero-lead {
  font-size: 16px;
  line-height: 1.8;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.88);
}
/* 章の大見出し(たいち 11/07「トップとか含めて全部」「ただ黒字でこのくらいでかければ目立つ」)。
   大きさの見本はトップの「賃貸経営で、こんなお悩みはありませんか？」(top.css の .trouble-heading)。黄緑は付けない。
   後から読まれるページごとの指定に負けないよう、:is の中に一番強い書き方も並べている */
main
:is(
  .section-title,
  .section-title-center,
  .split-title,
  .about-title,
  .contact-title,
  .page-cta h2,
  .page-cta.has-photo h2,
  .section-split-fit .split-title,
  .section-appraisal .appraisal-section-title
) {
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1.45;
  letter-spacing: 0.06em;
}
main .section-title-center::after {
  content: none;
}
/* 一番狭いスマホでも、句の途中で画面からはみ出さない大きさにする */
@media (max-width: 360px) {
  main
    :is(
      .section-title,
      .section-title-center,
      .split-title,
      .about-title,
      .contact-title,
      .page-cta h2,
      .page-cta.has-photo h2,
      .section-split-fit .split-title,
      .section-appraisal .appraisal-section-title
    ) {
    font-size: 26px;
  }
}
/* 大きくした見出しの直後に罫線が来る所は、文字が線に付かないよう間を空ける */
.section-title + .faq-list {
  margin-top: 24px;
}
/* 見出しの①②(管理サービスの「このページの流れ」と同じ順) */
.chapter-num {
  margin-right: 0.3em;
}
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
/* 規約・お問い合わせなどの帯。背景の写真は src/data/pageHeroPhotos.ts で敷く */
.page-hero.is-plain .page-hero-inner {
  padding: var(--page-hero-pad-top) 0 24px;
}
/* 詰めた帯は文字が帯いっぱいに広がるので、写真の上の膜を濃くして白い文字を読みやすくする */
.page-hero.is-plain .page-hero-photo::after {
  background: linear-gradient(
    90deg,
    rgba(20, 21, 22, 0.82) 0%,
    rgba(20, 21, 22, 0.66) 55%,
    rgba(20, 21, 22, 0.5) 100%
  );
}
/* 写真の右下にロゴを重ねる帯(会社情報)。写真が明るいので、暗い膜は文字のある左だけにする */
.page-hero.is-plain .page-hero-photo.has-brand-mark::after {
  background: linear-gradient(
    90deg,
    rgba(20, 21, 22, 0.7) 0%,
    rgba(20, 21, 22, 0.36) 45%,
    rgba(20, 21, 22, 0) 70%
  );
}
.page-hero-brand {
  position: absolute;
  z-index: 1;
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
  bottom: 28px;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 200px;
}
.page-hero-brand-mark {
  width: 100%;
  height: auto;
}
.page-hero-brand-catch {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.page-hero-brand-word {
  width: 82%;
  height: auto;
}
@media (max-width: 1100px) {
  /* 幅が狭いと、説明の文とロゴが重なるので出さない */
  .page-hero-brand {
    display: none;
  }
}

/* ===== セクションの地 ===== */
.section-soft {
  background: var(--color-soft);
}
.section-dark {
  background: var(--color-primary);
  color: #fff;
}
.section-dark .section-lead,
.section-dark .info-card p {
  color: var(--color-dark-text-sub);
}
.section-narrow .container {
  max-width: 920px;
}

/* ===== カード ===== */
.card-grid {
  display: grid;
  gap: 20px;
}
.card-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.card-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.card-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.info-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 28px 28px 30px;
}
.info-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 10px;
}
.info-card p {
  font-size: 15px;
  color: var(--color-text-sub);
}
.info-card .num {
  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;
}
.info-card .card-image {
  margin: -28px -28px 20px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-sand);
}
.info-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}
.info-card .text-arrow {
  margin-top: 14px;
}
.info-card.is-dark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.info-card.is-dark p {
  color: var(--color-dark-text-sub);
}
.info-card.is-dark .num {
  color: rgba(255, 255, 255, 0.35);
}
.info-card.is-gray {
  background: var(--color-sand);
  border-color: var(--color-sand);
}
.info-card.is-gray .num {
  color: var(--color-accent);
}
a.info-card {
  display: block;
  text-decoration: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
a.info-card:hover {
  border-color: var(--color-line-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

/* ===== 写真と文章の横並び ===== */
.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.media-row + .media-row {
  margin-top: 64px;
}
.media-row.is-reverse .media-row-image {
  order: 2;
}
.media-row-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.media-row-text h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 14px;
}
.media-row-text p {
  font-size: 15.5px;
  color: var(--color-text-sub);
}
.media-row-text p + p {
  margin-top: 12px;
}

/* ===== 箇条書き ===== */
.check-list {
  display: grid;
  gap: 8px;
}
.check-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}
.dot-list {
  display: grid;
  gap: 6px;
}
.dot-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.8em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.note-box {
  padding: 22px 28px;
  border: 1px dashed var(--color-line-strong);
  font-size: 15px;
  color: var(--color-text-sub);
}
.note-box + .note-box {
  margin-top: 16px;
}

/* ===== 表 ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--color-card);
}
.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-line);
}
.data-table tr:first-child th,
.data-table tr:first-child td {
  border-top: 1px solid var(--color-text);
}
.data-table th {
  width: 200px;
  font-weight: 700;
  background: var(--color-soft);
}
.data-table thead th {
  background: var(--color-primary);
  color: #fff;
  width: auto;
}

/* ===== 番号つきの手順(縦) ===== */
.step-list {
  display: grid;
  gap: 0;
  counter-reset: step;
}
.step-list > li {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-line);
}
.step-list > li:first-child {
  border-top: 1px solid var(--color-text);
}
.step-list .step-no {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-line-strong);
  font-variant-numeric: lining-nums;
}
.step-list h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.step-list p {
  font-size: 15px;
  color: var(--color-text-sub);
}

/* ===== ページ下の相談の帯 ===== */
.page-cta {
  background: var(--color-primary);
  color: #fff;
  padding-block: 72px;
}
.page-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.page-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 28px;
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.page-cta p {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--color-dark-text-sub);
}
.page-cta-actions {
  display: grid;
  gap: 12px;
  min-width: 300px;
}
.page-cta-tel {
  display: block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  line-height: 1.3;
}
.page-cta-tel small {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-dark-text-sub);
}

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

/* ===== タグ ===== */
.tag {
  display: inline-block;
  font-size: 12px;
  border: 1px solid var(--color-line-strong);
  padding: 0 8px;
  color: var(--color-text-sub);
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* ===== フォーム ===== */
.form {
  display: grid;
  gap: 22px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 40px;
}
.form-field {
  display: grid;
  gap: 8px;
}
.form-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.form-required {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  padding: 1px 8px;
}
.form-optional {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-sub);
  border: 1px solid var(--color-line-strong);
  padding: 0 8px;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
}
.form textarea {
  min-height: 160px;
  resize: vertical;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.form-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 15px;
}
.form-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.form-note {
  font-size: 13px;
  color: var(--color-text-sub);
}
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.form-actions .btn {
  min-width: 320px;
}

/* ===== 記事の本文 ===== */
.article-body {
  max-width: 820px;
  margin-inline: auto;
  font-size: 16.5px;
  line-height: 2.05;
}
.article-body > * + * {
  margin-top: 1.4em;
}
.article-body h2 {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 2.4em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-text);
}
.article-body h3 {
  font-size: 19px;
  font-weight: 700;
  margin-top: 2em;
  padding-left: 12px;
  border-left: 3px solid var(--color-primary);
}
.article-body figure img {
  width: 100%;
  border: 1px solid var(--color-line);
}
.article-body figcaption {
  font-size: 13px;
  color: var(--color-text-sub);
  margin-top: 8px;
}
.article-body ul {
  display: grid;
  gap: 6px;
  padding-left: 1.2em;
  list-style: disc;
}
.article-body ol {
  display: grid;
  gap: 6px;
  padding-left: 1.4em;
  list-style: decimal;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* ===== タブレット ===== */
@media (max-width: 1100px) {
  .card-grid.cols-3,
  .card-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .media-row {
    gap: 32px;
  }
  .page-cta-inner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===== スマホ ===== */
@media (max-width: 760px) {
  .page-hero-inner,
  .page-hero.is-plain .page-hero-inner {
    padding: var(--page-hero-pad-top) 0 24px;
  }
  .page-hero h1 {
    font-size: 25px;
  }
  .page-hero-lead {
    font-size: 14px;
    line-height: 1.7;
  }
  .page-hero-actions {
    gap: 8px;
  }
  .page-hero-actions .btn {
    width: 100%;
  }
  .card-grid.cols-2,
  .card-grid.cols-3,
  .card-grid.cols-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .info-card {
    padding: 22px 20px;
  }
  .info-card .card-image {
    margin: -22px -20px 16px;
  }
  .media-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .media-row.is-reverse .media-row-image {
    order: 0;
  }
  .media-row + .media-row {
    margin-top: 44px;
  }
  .media-row-text h3 {
    font-size: 18px;
  }
  .data-table th,
  .data-table td {
    display: block;
    width: auto;
    padding: 12px 16px;
  }
  .data-table th {
    border-bottom: 0;
  }
  .step-list > li {
    grid-template-columns: 52px 1fr;
    gap: 14px;
  }
  .step-list .step-no {
    font-size: 30px;
  }
  .page-cta {
    padding-block: 52px;
  }
  .page-cta h2 {
    font-size: 22px;
  }
  .page-cta-actions {
    min-width: 0;
  }
  .form {
    padding: 24px 18px;
  }
  .form-actions .btn {
    min-width: 0;
    width: 100%;
  }
  .article-body {
    font-size: 15.5px;
  }
  .article-body h2 {
    font-size: 21px;
  }
  /* スマホは左揃え */
  .info-card p,
  .media-row-text p,
  .step-list p,
  .note-box,
  .page-cta p,
  .article-body p,
  .check-list li,
  .dot-list li {
    text-align: left;
  }
}

/* ===== 小さな共通部品 ===== */
.center-lead {
  margin: -28px auto 40px;
  text-align: center;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 16px;
}
.block-gap {
  margin-top: 48px;
}
.check-block {
  margin-top: 56px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 32px 36px;
}
.check-block-lead {
  font-size: 15px;
  color: var(--color-text-sub);
  margin-bottom: 20px;
}
.check-list.cols {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 32px;
}
@media (max-width: 760px) {
  .center-lead {
    margin: -16px auto 28px;
    text-align: left;
  }
  .row-actions .btn {
    width: 100%;
  }
  .check-block {
    padding: 22px 18px;
  }
  .check-list.cols {
    grid-template-columns: 1fr;
  }
}

/* 幅の狭いカードの中は両端揃えにしない(style.css の同じ指定の説明を参照) */
.info-card p,
.step-list p,
.check-list li,
.dot-list li {
  text-align: left;
}

/* 際立たせる文字は明朝(決まりは style.css の :root) */
.article-body h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
}

/* =====================================================================
   全ページ統一の部品(2026-11-06 たいち「トップと管理サービスと全く同じデザイン感で統一」)
   管理サービス(owner_management.css の mng-)とトップ(top.css)の形をそのまま共通にした物。名前は nx-。
   色・書体は style.css の変数だけを使う。決まりは1か所: 地は白とグレー、単調さを切る黒い帯、目立たせる所だけ黄緑
   ===================================================================== */
:root {
  --nx-lift-y: -6px;
  --nx-lift-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
  --nx-lift-transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  --nx-green-1: #eef6de; /* 黄緑へ染まる矢羽根の淡い色(トップの流れの図と同じ値) */
  --nx-green-2: #d6ebaa;
  --nx-dark-edge: #232425; /* 写真に黒い膜の帯の下端の色。次の章への V の色に使う */
}

/* 点線の説明はやめ、グレーの面に黄緑の線で示す */
.note-box {
  border: 0;
  border-left: 3px solid var(--brand-green);
  background: var(--color-soft);
  color: var(--color-text);
}
.section-soft .note-box {
  background: var(--color-card);
}

/* ----- 表紙の右の「このページの流れ」(mng-story と同じ) ----- */
.nx-story-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.nx-story-list li + li {
  margin-top: -10px;
}
.nx-story-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 26px;
  color: #fff;
  text-decoration: none;
  background: rgba(20, 21, 22, 0.55);
  backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 50% 14px, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
  transition: background-color 0.25s ease;
}
.nx-story-list li:first-child a {
  padding-top: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
}
.nx-story-list li:nth-child(2) a {
  background: rgba(20, 21, 22, 0.64);
}
.nx-story-list li:nth-child(3) a {
  background: rgba(20, 21, 22, 0.72);
}
.nx-story-list li:nth-child(4) a {
  background: rgba(20, 21, 22, 0.8);
}
.nx-story-list li:last-child a {
  padding-bottom: 16px;
  background: var(--brand-green);
  color: var(--color-text);
  clip-path: polygon(0 0, 50% 14px, 100% 0, 100% 100%, 0 100%);
}
.nx-story-list a:is(:hover, :focus-visible) {
  background: rgba(20, 21, 22, 0.92);
  outline: none;
}
.nx-story-list li:last-child a:is(:hover, :focus-visible) {
  background: #a4e03a;
}
.nx-story-num {
  flex: none;
  width: 30px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.nx-story-text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.nx-story-text small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.nx-story-list li:last-child small {
  color: rgba(20, 20, 20, 0.75);
}
@media (min-width: 1101px) {
  .page-hero.has-story .page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 56px;
    align-items: end;
  }
  .page-hero.has-story .page-hero-inner > :not(.nx-story) {
    grid-column: 1;
  }
  .page-hero.has-story .nx-story {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
  }
}
@media (max-width: 1100px) {
  .nx-story {
    margin-top: 32px;
    max-width: 520px;
  }
}

/* ----- 章と章の分け目の V(mng-next と同じ) ----- */
.nx-next {
  position: relative;
  z-index: 2;
  height: 0;
}
.nx-next + .section {
  padding-top: calc(var(--section-space) + 44px);
}
.nx-next-mark {
  position: absolute;
  left: 50%;
  top: -1px;
  width: 180px;
  height: 46px;
  transform: translateX(-50%);
  background: var(--color-base);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.nx-next.is-from-soft .nx-next-mark {
  background: var(--color-soft);
}
.nx-next.is-from-dark .nx-next-mark {
  background: var(--nx-dark-edge);
}
.nx-next-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-right: 3px solid var(--brand-green);
  border-bottom: 3px solid var(--brand-green);
  transform: rotate(45deg);
}
.nx-next-label {
  position: absolute;
  left: 50%;
  top: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.nx-next-label b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 12px;
  letter-spacing: 0;
}

/* ----- 上に黄緑の線と札、四角チェックの行(mng-fit と同じ) ----- */
.nx-fit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.nx-fit.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nx-fit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 30px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--brand-green);
}
.nx-fit-badge {
  position: absolute;
  top: -16px;
  left: 32px;
  padding: 4px 16px;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nx-fit-head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.nx-checks {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}
.nx-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-soft .nx-checks li {
  background: var(--color-card);
}
.section-soft .nx-fit-card .nx-checks li {
  background: var(--color-soft);
}
.nx-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;
}
.nx-checks li::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 50%;
  width: 6px;
  height: 11px;
  margin-top: -8px;
  border-right: 2.5px solid var(--brand-green);
  border-bottom: 2.5px solid var(--brand-green);
  transform: rotate(45deg);
}
.nx-checks.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nx-checks li b {
  display: block;
  font-weight: 700;
}
.nx-checks li small {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-text-sub);
}
.nx-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;
}
.nx-answer b {
  display: block;
}

/* ----- 絵記号の丸(mng-report-icon と同じ) ----- */
.nx-icon {
  position: relative;
  flex: none;
  display: block;
  width: 64px;
  height: 64px;
  padding: 17px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
.nx-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nx-icon i {
  position: absolute;
  top: -4px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}
.nx-icon.is-small {
  width: 48px;
  height: 48px;
  padding: 12px;
}

/* ----- 書類の形のカード(mng-report と同じ) ----- */
.nx-docs {
  gap: 28px;
}
.nx-doc {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
  padding: 30px 30px 32px;
  background: var(--color-card);
  border-top: 4px solid var(--color-primary);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.section:not(.section-soft) .nx-doc {
  background: var(--color-soft);
}
.nx-doc::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(225deg, transparent 50%, var(--color-line-strong) 50%);
}
.nx-doc .nx-icon {
  grid-row: span 2;
}
/* 横に並んだカードどうしで、題・小見出し・本文の行の高さをそろえる(たいち 11/08「緑の線がそろってない」)。
   題が2行のカードがあっても、本文の上の緑の線が同じ高さに来る */
@supports (grid-template-rows: subgrid) {
  .nx-docs > .nx-doc {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.nx-doc h3 {
  align-self: end;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.nx-doc-q {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-sub);
}
.nx-doc-body {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 3px solid var(--brand-green);
  font-size: 15px;
  text-align: left;
}
.nx-doc-body p {
  text-align: left;
}
.nx-doc-body > .dot-list li {
  font-size: 15px;
}

/* ----- 写真の下端に黒い題の札(mng-menu と同じ) ----- */
.nx-menu {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
  counter-reset: nx-menu;
}
.nx-menu .photo-card {
  counter-increment: nx-menu;
}
.nx-menu .photo-card-image {
  aspect-ratio: 3 / 2;
}
.nx-menu .photo-card-body {
  padding-top: 0;
}
.nx-menu .photo-card-body h3 {
  position: relative;
  align-self: flex-start;
  margin: -30px 0 14px -22px;
  padding: 12px 22px 12px 18px;
  background: var(--color-primary);
  border-left: 4px solid var(--brand-green);
  color: #fff;
}
.nx-menu .photo-card-body h3::before {
  content: counter(nx-menu, decimal-leading-zero);
  margin-right: 12px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--brand-green);
}

/* ----- 写真に黒い膜の帯とガラスのカード(トップの6つの理由と同じ) ----- */
.nx-band {
  position: relative;
  background:
    linear-gradient(rgba(20, 21, 22, 0.72), rgba(20, 21, 22, 0.86)),
    url("/img/new/hero-3-living-indirect-light.webp") center / cover;
  color: #fff;
}
.nx-band :is(.section-title, .section-title-center) {
  color: #fff;
}
.nx-band .section-title-center::after {
  background: var(--brand-green);
}
.nx-band .section-lead {
  color: rgba(255, 255, 255, 0.82);
}
.nx-kicker {
  margin-bottom: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-green);
}
.nx-glass-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.nx-glass {
  position: relative;
  display: block;
  padding: 30px 28px;
  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;
  text-decoration: none;
}
/* 浮く動きは、押すとどこかへ行く札(リンク)だけ。押せない札は動かさない(2026-11-09 たいち「ボタンみたいな感じになってるから、このアニメーションやめて」) */
a.nx-glass {
  transition: var(--nx-lift-transition);
}
a.nx-glass:hover {
  transform: translateY(var(--nx-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);
}
.nx-pill {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px 6px;
  border-radius: 999px;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
}
.nx-glass h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 10px;
}
.nx-glass p:not(.nx-pill) {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
}
.nx-band-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
@media (prefers-reduced-motion: reduce) {
  a.nx-glass:hover {
    transform: none;
  }
}

/* ----- 白から黄緑へ染まる矢羽根(トップの流れの図と同じ) ----- */
.nx-flow-green .section-title {
  margin-bottom: 32px;
}
.nx-flow-green .flow-step:nth-child(2) .flow-body {
  background: var(--nx-green-1);
}
.nx-flow-green .flow-step:nth-child(3) .flow-body {
  background: var(--nx-green-2);
}
.nx-flow-green .flow-step:nth-child(4) .flow-body {
  background: var(--brand-green);
  color: var(--color-text);
}
.nx-flow-green .flow-step-decide .flow-body p {
  color: #2c3a14;
}
.nx-flow-green .flow-pin::after {
  box-shadow: 0 0 0 3px var(--color-soft);
}

/* ----- 箱と矢印の図(mng-zu と同じ考え方) ----- */
.nx-zu {
  margin: 0;
  padding: 32px;
  background: var(--color-soft);
  border-top: 4px solid var(--brand-green);
}
.section-soft .nx-zu {
  background: var(--color-card);
}
.nx-zu-head {
  margin-bottom: 24px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.nx-zu-flow {
  display: flex;
  align-items: stretch;
}
.nx-zu-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nx-zu-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.nx-zu-step b {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 12px;
}
.nx-zu-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
}
.section-soft .nx-zu-box {
  background: var(--color-soft);
  border-color: transparent;
}
.nx-zu-box b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
}
.nx-zu-box small {
  /* 幅320などの狭い画面で、長い文節が枠より長い時はその途中でも折る(2026-11-09 たいち「いろんな携帯で」) */
  overflow-wrap: anywhere;
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-sub);
}
.nx-zu-box.is-dark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.nx-zu-box.is-dark small {
  color: var(--color-dark-text-sub);
}
.nx-zu-box.is-dark .nx-icon {
  background: rgba(255, 255, 255, 0.12);
}
.nx-zu-box.is-accent {
  border-left: 4px solid var(--brand-green);
}
/* 矢印: PC は右向き、スマホは下向き */
.nx-zu-arrow {
  position: relative;
  flex: 0 0 72px;
  align-self: center;
  height: 3px;
  margin-inline: 8px;
  background: var(--brand-green);
}
.nx-zu-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -6px;
  border-left: 11px solid var(--brand-green);
  border-top: 7.5px solid transparent;
  border-bottom: 7.5px solid transparent;
}
.nx-zu-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--color-text-sub);
  text-align: left;
}

/* ----- 横に並ぶ矢羽根(スマホは縦) ----- */
.nx-path {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin-bottom: 32px;
  --nx-arrow: 24px;
}
.nx-path li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  margin-right: calc(var(--nx-arrow) * -1);
  padding: 14px calc(var(--nx-arrow) + 18px);
  background: var(--color-primary);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
  clip-path: polygon(
    0 0,
    calc(100% - var(--nx-arrow)) 0,
    100% 50%,
    calc(100% - var(--nx-arrow)) 100%,
    0 100%,
    var(--nx-arrow) 50%
  );
}
.nx-path li:first-child {
  padding-left: 22px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--nx-arrow)) 0,
    100% 50%,
    calc(100% - var(--nx-arrow)) 100%,
    0 100%
  );
}
.nx-path li:nth-child(2) {
  background: var(--color-primary-dark);
}
.nx-path li:last-child {
  margin-right: 0;
  background: var(--brand-green);
  color: var(--color-text);
}
.nx-path-no {
  flex: none;
  font-size: 22px;
  line-height: 1;
}

/* ----- 本文の途中の黒い相談の面(page-cta の小さい版) ----- */
.nx-consult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 48px;
  padding: 36px 40px;
  border-radius: 12px;
  border-top: 4px solid var(--brand-green);
  background: var(--color-primary-dark);
  color: #fff;
}
.nx-consult-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 22px;
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.nx-consult-text {
  margin-top: 8px;
  font-size: 15px;
  color: var(--color-dark-text-sub);
  text-align: left;
}
.nx-consult-text + .text-arrow,
.nx-consult .text-arrow {
  display: inline-block;
  margin-top: 12px;
  color: #fff;
}
.nx-consult-actions {
  flex: none;
  display: grid;
  gap: 10px;
  min-width: 280px;
}

/* ----- 押して進むカード(トップのカードと同じ浮き方) ----- */
.nx-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 26px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-card);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  transition: var(--nx-lift-transition);
}
.nx-link-card::after {
  content: "→";
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1;
}
.nx-link-card:is(:hover, :focus-visible) {
  transform: translateY(var(--nx-lift-y));
  box-shadow: var(--nx-lift-shadow);
  border-color: var(--brand-green);
}
@media (prefers-reduced-motion: reduce) {
  .nx-link-card:is(:hover, :focus-visible) {
    transform: none;
  }
}

/* ----- ご挨拶の白い便箋(mng-greeting と同じ) ----- */
.nx-letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 長い社名で枠より広がり、スマホで文が切れないように */
  gap: 28px;
  max-width: 900px;
  margin-inline: auto;
  padding: 56px 72px 52px;
  background: var(--color-card);
  border-top: 3px solid var(--brand-green);
  box-shadow: 0 18px 40px rgba(20, 21, 22, 0.06);
}
.nx-letter .section-title {
  text-align: center;
}
.nx-letter .section-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--color-text);
}
.nx-letter-text p {
  font-size: 15.5px;
  line-height: 2.1;
  color: var(--color-text-sub);
}
.nx-letter-text p + p {
  margin-top: 10px;
}
.nx-letter-text .nx-letter-sign {
  margin-top: 24px;
  text-align: right;
  color: var(--color-text);
  font-weight: 500;
}

/* ----- 法律の文のページ: 本文はそのまま。見出しと枠だけそろえる ----- */
:is(.page-privacy, .page-privacy_policy, .page-privacy_disclosure, .page-harassment)
  .policy-body
  > h2 {
  padding-bottom: 12px;
  border-bottom: 3px solid var(--brand-green);
}
:is(.page-privacy, .page-privacy_policy, .page-privacy_disclosure, .page-harassment)
  :is(.policy-items, .policy-box, ul.policy-list) {
  border-left: 3px solid var(--brand-green);
}
.page-privacy .policy-related {
  border: 0;
  border-left: 3px solid var(--brand-green);
  background: var(--color-soft);
}

/* ----- 入力フォームの見た目: 欄と文言は変えず、枠と見出しだけそろえる ----- */
:is(.page-contact, .page-owner_seminar_apply) .form {
  border-top: 4px solid var(--brand-green);
  box-shadow: 0 18px 40px rgba(20, 21, 22, 0.06);
}
:is(.page-contact, .page-owner_seminar_apply) .form-required {
  background: var(--brand-green);
  color: var(--color-text);
}
:is(.page-contact, .page-owner_seminar_apply) .form .sub-heading {
  border-left-color: var(--brand-green);
}

/* ----- 統一の部品のタブレット・スマホ ----- */
@media (max-width: 1100px) {
  .nx-menu {
    grid-template-columns: repeat(2, 1fr);
  }
  .nx-consult {
    flex-direction: column;
    align-items: stretch;
  }
  .nx-consult-actions {
    min-width: 0;
  }
}
@media (max-width: 900px) {
  .nx-fit,
  .nx-fit.is-two,
  .nx-glass-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx-fit {
    gap: 36px;
  }
  .nx-glass-grid {
    gap: 14px;
  }
  /* 図は縦に流す */
  .nx-zu-flow {
    flex-direction: column;
  }
  .nx-zu-arrow {
    flex: none;
    align-self: center;
    width: 3px;
    height: 36px;
    margin: 8px 0 12px;
  }
  .nx-zu-arrow::after {
    right: auto;
    left: -6px;
    top: auto;
    bottom: -1px;
    border-top: 11px solid var(--brand-green);
    border-bottom: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
  }
  /* 横の矢羽根も縦に積む */
  .nx-path {
    grid-auto-flow: row;
  }
  .nx-path li,
  .nx-path li:first-child {
    min-height: 0;
    margin-right: 0;
    margin-top: -10px;
    padding: 18px 22px 28px;
    clip-path: polygon(
      0 0,
      50% 14px,
      100% 0,
      100% calc(100% - 14px),
      50% 100%,
      0 calc(100% - 14px)
    );
  }
  .nx-path li:first-child {
    margin-top: 0;
    padding-top: 14px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
  }
  .nx-path li:last-child {
    padding-bottom: 18px;
    clip-path: polygon(0 0, 50% 14px, 100% 0, 100% 100%, 0 100%);
  }
}
@media (max-width: 760px) {
  .nx-next + .section {
    padding-top: calc(var(--section-space) + 64px);
  }
  .nx-fit-card {
    padding: 32px 22px 24px;
  }
  .nx-fit-badge {
    left: 22px;
  }
  .nx-checks.is-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx-checks li {
    font-size: 14px;
  }
  .nx-docs {
    gap: 18px;
  }
  .nx-doc {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 24px 20px 26px;
  }
  .nx-doc .nx-icon {
    width: 56px;
    height: 56px;
    padding: 15px;
  }
  /* 写真のカードはスマホだと写真が左・文が右の横長(style.css)。札の位置を合わせる */
  .nx-menu {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx-menu .photo-card-image {
    aspect-ratio: auto;
  }
  .nx-menu .photo-card-body {
    padding-top: 14px;
  }
  .nx-menu .photo-card-body h3 {
    margin: 0 0 10px -16px;
    padding: 8px 14px 8px 12px;
  }
  /* ガラスのカード(空室対策の「広告」など・見直しの3つの確認ポイント・相続の分かるとよいこと)は、スマホでは2列に並べて小さくする。
     3枚目など余った1枚は横いっぱい。余白・番号・題・行間を詰める。本文は14px(2026-11-13 たいち「カードが一つずつでかすぎ。もっとコンパクトに」) */
  .nx-glass-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .nx-glass-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .nx-glass {
    padding: 14px 14px 16px;
  }
  .nx-glass .nx-pill {
    margin-bottom: 8px;
    padding: 4px 10px 3px;
    font-size: 14px;
  }
  .nx-glass h3 {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 6px;
  }
  .nx-glass p:not(.nx-pill) {
    font-size: 14px;
    line-height: 1.7;
  }
  .nx-band-actions .btn {
    width: 100%;
  }
  .nx-zu {
    padding: 22px 16px;
  }
  .nx-consult {
    margin-top: 36px;
    padding: 26px 20px;
  }
  .nx-consult-title {
    font-size: 19px;
  }
  .nx-link-card {
    padding: 18px 20px;
  }
  .nx-letter {
    padding: 36px 22px 32px;
  }
  .nx-letter-text p {
    text-align: left;
  }
}
/* 幅360px 未満(古い小さなスマホ)では、2列だと1行が7字ほどになり「含まれ/ているか」のように細かく割れる。1列にする(余白と字は小さいまま) */
@media (max-width: 359px) {
  .nx-glass-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 狭い幅で入力欄が枠からはみ出さない(グリッドの列が中身の幅に広がるのを止める) */
:is(.page-contact, .page-owner_seminar_apply) .form {
  grid-template-columns: minmax(0, 1fr);
}

/* 写真つきの相談の帯: トップの相談の章と同じく、明るい写真の上に濃い文字、ボタンは白い箱の中(2026-11-06 たいち) */
.page-cta.has-photo {
  position: relative;
  overflow: hidden;
  background: #e9e8e6;
  color: var(--color-text);
  padding-block: 56px;
}
.page-cta-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.page-cta.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.46) 45%,
    rgba(255, 255, 255, 0) 74%
  );
}
.page-cta.has-photo .page-cta-inner {
  position: relative;
  z-index: 1;
}
.page-cta.has-photo h2 {
  color: var(--color-text);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.85);
  font-weight: 700;
}
.page-cta.has-photo p {
  color: var(--color-text);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
.page-cta.has-photo .page-cta-actions {
  flex: none;
  min-width: 340px;
  padding: 28px 32px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.page-cta.has-photo .btn-white {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.page-cta.has-photo .btn-white:hover {
  background: var(--color-text);
}
.page-cta.has-photo .btn-ghost:not([href*="satei"]) {
  background: #fff;
  border-color: var(--color-text);
  color: var(--color-text);
}
.page-cta.has-photo .page-cta-actions .page-cta-tel {
  border-top-color: var(--color-line-strong);
  color: var(--color-text);
}
.page-cta.has-photo .page-cta-tel,
.page-cta.has-photo .page-cta-tel small {
  color: var(--color-text);
}
.page-cta.has-photo .page-cta-tel small {
  color: var(--color-text-sub);
}
@media (max-width: 760px) {
  .page-cta.has-photo::after {
    background: rgba(255, 255, 255, 0.72);
  }
  .page-cta.has-photo .page-cta-actions {
    min-width: 0;
    padding: 20px;
  }
}