@charset "UTF-8";
/* ============================================================
   株式会社Life サイトリニューアル v2
   設計元: https://apartment.apaxhome.co.jp/ の設計体系を採寸して構築
   ・見出しは純黒(#000)ではっきり。ブランド色は英字サブと差し色に回す
   ・日本語・数字・英字すべて Noto Sans JP（400/500/700）で統一
   ・角丸は「10px 0」の非対称と、ピル形の2種類だけ
   ・余白はclampのスケールで統一（セクション間120〜160px）
   ============================================================ */

:root {
  /* ---- 色 ----------------------------------------------------
     役割で色を固定する。朱色は「主行動（相談・問い合わせ）」専用で、
     英字見出し・番号・装飾には一切使わない。ブルーはブランドと回遊導線。
     面積の目安：白/薄グレー75% ／ 黒15% ／ ブルー7% ／ 朱3%以下
     コントラスト：白×朱 4.93:1 ／ 白×ブルー 7.12:1（ともにAA適合）
     ------------------------------------------------------------ */
  --c-base:            #000000;  /* 見出し */
  --c-base-deep:       #1a1a1a;  /* 本文 */
  --c-base-light:      #666666;  /* 補足文字（白地で5.74:1） */
  --c-base-pale:       #d1d1d1;  /* 罫線・暗い背景の上の文字 */
  --c-base-very-pale:  #f8f8f8;  /* セクション背景 */
  --c-white:           #ffffff;

  --c-primary:         #0d5f7d;  /* 信頼・ブランド（英字見出し／リンク／アイコン） */
  --c-primary-deep:    #0a4a61;  /* ブルーのホバー・濃い面 */
  --c-primary-pale:    #e8f2f6;  /* 安心感のある背景 */

  --c-accent:          #c9411d;  /* CTA専用 */
  --c-accent-deep:     #a92f14;  /* CTAホバー */

  --c-border:          var(--c-base-pale);
  --c-bg-sub:          var(--c-base-very-pale);

  /* ---- 書体 ---- */
  /* 読み込みが終わるまでの代役。OS標準のゴシックで見た目を近づける */
  --font-fallback: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
                   "Yu Gothic", "BIZ UDPGothic", Meiryo, "Helvetica Neue", Arial, sans-serif;
  /* 日本語・数字・英字すべてこれ1つで統一する */
  --font-main: "Noto Sans JP", var(--font-fallback);
  /* 以前は英字だけ別書体にしていた名残り。中身は本文と同じにしてある */
  --font-sub:  var(--font-main);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---- 行間 ---- */
  --lh:    1.9;
  --lh-s:  1.6;
  --lh-xs: 1.3;

  /* ---- 文字サイズ（6段階のみ。半端な値は作らない） ---- */
  --fs-s:   0.9375rem;                         /* 15px  補足・注記。14pxだと読みにくいので上げた */
  --fs-m:   1rem;                              /* 16px  本文 */
  --fs-l:   clamp(1.063rem, 1.302vw, 1.25rem); /* 17-20 リード */
  --fs-xl:  clamp(1.125rem, 1.563vw, 1.5rem);  /* 18-24 小見出し */
  --fs-2xl: clamp(1.375rem, 1.953vw, 1.875rem);/* 22-30 中見出し */
  --fs-3xl: clamp(1.375rem, 2.604vw, 2.5rem); /* 22-40 セクション見出し。スマホで手動改行の先が
                                                  さらに折り返さない大きさに合わせている */
  --fs-4xl: clamp(2.5rem, 4.688vw, 4.5rem);    /* 40-72 数字 */

  /* ---- 余白スケール ---- */
  --sp-3xs: clamp(0.125rem, 0.326vw, 0.313rem);
  --sp-2xs: clamp(0.313rem, 0.651vw, 0.625rem);
  --sp-xs:  clamp(0.688rem, 1.302vw, 1.25rem);
  --sp-s:   clamp(1.063rem, 1.953vw, 1.875rem);
  --sp-m:   clamp(1.438rem, 2.604vw, 2.5rem);
  --sp-l:   clamp(1.813rem, 3.255vw, 3.125rem);
  --sp-xl:  clamp(2.188rem, 3.906vw, 3.75rem);
  --sp-2xl: clamp(2.938rem, 5.208vw, 5rem);
  --sp-3xl: clamp(3.688rem, 6.510vw, 6.25rem);
  --sp-4xl: clamp(4.438rem, 7.813vw, 7.5rem);
  --sp-5xl: clamp(5.188rem, 9.115vw, 8.75rem);
  --sp-6xl: clamp(5.938rem, 10.417vw, 10rem);

  /* 2026-09-24 社長「セクションでページが長くなってる」で1段下げた（71〜120px から 59〜100px） */
  --section:   var(--sp-3xl);   /* 59〜100px */
  --section-l: var(--sp-5xl);   /* 83〜140px */

  /* ---- 幅 ---- */
  /* 大きい画面で左右が空きすぎないよう、2026-09-11に広げた。
     固定pxで止めると2500px級の画面で左右が400px以上余るので、画面幅に合わせて伸びる形にしてある。
     --w-small は読ませる文章の幅。**ここだけは広げない。** 1120pxにしたら1行67〜71文字になって読みにくかった */
  --w-small: 1000px;
  /* 2026-09-23 枠をヘッダーと同じ1つにまとめた。以前は1800px／2100px／1000px中央の3通りあり、
     セクションごとに文字の左端が最大5か所にずれていた */
  --w-basic: var(--w-large);
  --w-large: min(2100px, 95vw);
  /* 読ませる文章1段落の上限。文字の大きさに対して44字。枠が広がってもこれ以上は伸ばさない */
  --w-read: 44em;
  --gutter:  var(--sp-m);

  /* ---- 角丸：この2つ＋ピル形だけ ---- */
  --radius:      10px 0;   /* 標準カード：左上と右下だけ丸める */
  --radius-l:    20px 0;   /* 大きい面 */
  --radius-oval: 100vmax;  /* ボタン */

  /* ---- その他 ---- */
  --duration: .3s;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 80px;
}

/* ============================================================
   ベース
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  font-family: var(--font-main);
  font-size: var(--fs-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh);
  color: var(--c-base-deep);
  background: var(--c-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
}

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; }

/* 以前は数字と英字だけ別書体にしていた。今は本文と同じ書体（指定は残してある） */
.font-sub { font-family: var(--font-sub); }

::selection { background: var(--c-primary); color: #fff; }

/* ============================================================
   レイアウト用ユーティリティ
   ============================================================ */
.l-inner  { width: min(100% - var(--gutter) * 2, var(--w-basic)); margin-inline: auto; }
.l-inner--l { width: min(100% - var(--gutter) * 2, var(--w-large)); margin-inline: auto; }
.l-inner--s { width: min(100% - var(--gutter) * 2, var(--w-small)); margin-inline: auto; }

.l-section    { padding-block: var(--section); }
.l-section--l { padding-block: var(--section-l); }
.l-section--sub { background: var(--c-bg-sub); }

.u-mt-s  { margin-top: var(--sp-s); }
.u-mt-m  { margin-top: var(--sp-m); }
.u-mt-l  { margin-top: var(--sp-l); }
.u-mt-xl { margin-top: var(--sp-xl); }
.u-mt-2xl{ margin-top: var(--sp-2xl); }
.u-mt-3xl{ margin-top: var(--sp-3xl); }

.u-sp-only { display: none; }
@media (max-width: 820px) {
  .u-sp-only { display: block; }
  .u-pc-only { display: none; }
}

/* ============================================================
   見出し（ロゴマーク＋英字サブ＋日本語）
   ============================================================ */
.title-1-wrap { display: grid; gap: var(--sp-s); }
.title-1-wrap > p { font-size: var(--fs-l); }

.title-1 {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
}
.title-1__icon {
  flex: none;
  width: clamp(38px, 4vw, 54px);
  aspect-ratio: 1;
  background: no-repeat center / contain;
  margin-top: .15em;
}
.title-1__sub {
  display: block;
  font-family: var(--font-sub);
  font-size: var(--fs-m);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  line-height: 1.2;
  color: var(--c-primary);
}
.title-1__main {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-xs);
  letter-spacing: normal;   /* 字間は広げない。詰めも入れない */
  color: var(--c-base);
  margin-top: .35em;
}

/* 中央揃えが必要な場面用 */
.title-1--center { justify-content: center; text-align: center; }
.title-1--center + p { margin-inline: auto; text-align: center; }

/* 小見出し */
.title-2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-xs);
  color: var(--c-base);
}
.title-3 {
  font-size: var(--fs-l);
  font-weight: var(--fw-bold);
  line-height: var(--lh-s);
  color: var(--c-base);
}

/* 本文の補助 */
.text-note { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--c-base-light); }

/* 改行は画面の幅に任せる（文節で折り返す指定・行の長さをそろえる指定は使わない） */
.text-lead { font-size: var(--fs-l); }

/* 画面には出さないが、読み上げには残すラベル */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 文中のリンク。下線でリンクだと分かるようにする（色だけに頼らない） */
.u-link {
  color: var(--c-primary);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: .18em;
  transition: color var(--duration);
}
.u-link:hover { color: var(--c-accent); }

/* ============================================================
   ボタン（ピル形・矢印は円の中）
   ============================================================ */
.c-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05em 3.2em;
  min-width: 15rem;
  border-radius: var(--radius-oval);
  font-size: var(--fs-m);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: .02em;
  background: var(--c-primary);
  color: var(--c-white);
  text-align: center;
  transition: background-color var(--duration), color var(--duration);
}
/* 三角は文字の並びに影響させず、右端に固定する */
.c-button .c-button__arrow {
  position: absolute;
  right: 1.5em; top: 50%;
  transform: translateY(-50%);
}
.c-button:hover .c-button__arrow { transform: translateY(-50%) translateX(3px); }
/* 右端に小さな三角を置く。文字は中央に置き、三角だけを右に寄せる */
.c-button__arrow {
  flex: none;
  width: 0; height: 0;
  border-style: solid;
  border-width: .3em 0 .3em .48em;
  border-color: transparent transparent transparent currentColor;
  transition: transform var(--duration) var(--ease);
}
.c-button:hover { background: var(--c-primary-deep); }
.c-button:hover .c-button__arrow { transform: translateX(3px); }

.c-button--accent { background: var(--c-accent); }
.c-button--accent:hover { background: var(--c-accent-deep); }

.c-button--outline {
  background: transparent;
  color: var(--c-base);
  box-shadow: inset 0 0 0 1px var(--c-base-pale);
}
.c-button--outline:hover { background: var(--c-base); color: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-base); }

.c-button--white { background: var(--c-white); color: var(--c-base); }
.c-button--white:hover { background: var(--c-primary-pale); }

.c-button-wrap { display: flex; justify-content: center; }
@media (max-width: 480px) {
  .c-button { min-width: 0; width: 100%; padding-inline: 2.6em; }
}
.c-button-wrap--start { justify-content: flex-start; }

/* テキストリンク（矢印つき） */
.c-link {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: var(--fw-bold);
  color: var(--c-base);
}
/* 下線を敷いて、その先端に矢羽根を置く。丸で囲まない */
.c-link {
  padding-bottom: .3em;
  border-bottom: 1px solid var(--c-base-pale);
  transition: border-color var(--duration), color var(--duration);
}
.c-link::after {
  content: "";
  flex: none;
  width: .42em; height: .42em;
  border-top: 1px solid var(--c-primary);
  border-right: 1px solid var(--c-primary);
  transform: rotate(45deg);
  transition: transform var(--duration);
}
.c-link:hover { color: var(--c-primary); border-color: var(--c-primary); }
.c-link:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ============================================================
   装飾（オレンジの斜め切り／セクション境界）
   ============================================================ */

/* ============================================================
   ヘッダー（1段のみ・高さ80px固定）
   ============================================================ */
/* 対象者別の入口を置く細い帯。
   ご入居者様と仲介会社様はオーナー様と目的がまったく違うので、
   メインナビに混ぜず、ここで先に分岐させる。 */
.l-utility {
  background: var(--c-bg-sub);
  border-bottom: 1px solid var(--c-base-very-pale);
}
.l-utility__inner {
  width: min(100% - var(--sp-m) * 2, var(--w-large));
  margin-inline: auto;
  min-height: 36px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-s);
}
.l-utility a {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: 13px; font-weight: var(--fw-bold);
  color: var(--c-base-deep);
  padding-block: .4em;
  transition: color var(--duration);
}
.l-utility a::before { content: "›"; color: var(--c-primary); }
.l-utility a:hover { color: var(--c-primary); }
.l-utility__line { display: inline-flex; align-items: center; gap: .5em; }
.l-utility__line span { font-size: 12px; color: var(--c-base-light); }
.l-utility__line a { padding: 0; }
.l-utility__line a::before { content: none; }
.l-utility__line img { width: 88px; height: auto; }
/* 幅が狭いところではLINEを畳み、対象者リンクだけ残す */
@media (max-width: 640px) {
  .l-utility__inner { justify-content: center; gap: var(--sp-xs); }
  .l-utility__line { display: none; }
  .l-utility a { font-size: 12px; }
}

.l-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-base-very-pale);
}
.l-header__inner {
  height: 100%;
  display: flex; align-items: center; gap: var(--sp-s);
  width: min(100% - var(--sp-m) * 2, var(--w-large));
  margin-inline: auto;
}
.l-header__logo { flex: none; display: flex; align-items: center; gap: var(--sp-2xs); }
.l-header__logo img { width: clamp(150px, 15vw, 200px); }
.l-header__badge {
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
  padding: .5em .8em;
  border-radius: var(--radius-oval);
  background: var(--c-primary-pale);
  color: var(--c-primary-deep);
  white-space: nowrap;
}
.l-header__nav { margin-left: auto; }
.l-header__nav ul { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); }
.l-header__nav a {
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transition: color var(--duration);
}
.l-header__nav a:hover { color: var(--c-primary); }
.l-header__actions { flex: none; display: flex; align-items: center; gap: var(--sp-xs); }
.l-header__tel { display: grid; line-height: 1.2; }
.l-header__tel small { font-size: 11px; color: var(--c-base-light); font-weight: var(--fw-bold); }
.l-header__tel a {
  font-family: var(--font-sub);
  font-size: 22px; font-weight: var(--fw-bold);
  letter-spacing: .01em;
}
.l-header .c-button { min-width: 0; min-height: 44px; padding: .7em 2.4em .7em 1.4em; font-size: var(--fs-s); }
.l-header .c-button .c-button__arrow { right: 1.1em; }

/* ハンバーガー */
.l-header__toggle { display: none; }
.l-header__toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--c-base);
  transition: transform var(--duration), opacity var(--duration);
}
.l-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.l-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.l-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ヘッダーは幅に応じて段階的に畳む。
   グローバルメニューは最後まで残し、優先度の低いものから先に捨てる。
   （中身の実測は約1020pxなので、1200pxで畳むのは早すぎる） */

/* 電話番号を捨ててナビを守る。1150pxでは遅く、1160〜1260pxで「無料相談」が画面からはみ出していた（2026-09-29 実測） */
@media (max-width: 1359px) {
  .l-header__tel { display: none; }
}
/* バッジを捨て、ナビを詰めてさらに耐える */
@media (max-width: 1040px) {
  .l-header__badge { display: none; }
  .l-header__nav ul { gap: 15px; }
  .l-header__nav a { font-size: 13px; }
  .l-header__logo img { width: clamp(140px, 14vw, 170px); }
}
/* ここで限界。ナビを畳んでハンバーガーに引き継ぐ */
@media (max-width: 900px) {
  .l-header__nav { display: none; }
  /* ナビが消えると actions ごと左に寄るので、actions 自体を右端へ送る */
  .l-header__actions { margin-left: auto; }
  .l-header__toggle {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
    margin-right: -10px;   /* 視覚的な右端を揃える（タップ領域は44pxのまま） */
  }
}
@media (max-width: 820px) {
  :root { --header-h: 64px; }
  .l-header__actions .c-button { display: none; }
}

/* ドロワー */
.l-drawer {
  position: fixed; inset: var(--header-h) 0 0;   /* 実際の開始位置は開くときJSで補正する */
  z-index: 99;
  background: var(--c-white);
  padding: var(--sp-s) var(--sp-s) var(--sp-m);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration), visibility var(--duration);
}
.l-drawer.is-open { opacity: 1; visibility: visible; }

/* グループの見出し。10項目を一続きにすると単調になるので区切る */
.l-drawer__label {
  font-family: var(--font-sub);
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .18em; color: var(--c-primary);
  padding-left: .8em;
  margin-bottom: var(--sp-2xs);
}
.l-drawer__label:not(:first-child) { margin-top: var(--sp-s); }

.l-drawer ul { display: grid; gap: 5px; }

/* 各項目を塗りのカードにする。
   文字を左端・矢印を右端に置いても、面で繋がるので間が空いて見えない。 */
.l-drawer ul a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xs);
  padding: .7em 1em;
  font-size: var(--fs-m); font-weight: var(--fw-bold);
  line-height: 1.4;
  background: var(--c-bg-sub);
  border-radius: var(--radius);
  transition: background-color var(--duration), color var(--duration);
}
.l-drawer ul a::after {
  content: "";
  flex: none;
  width: .5em; height: .5em;
  border-top: 1.5px solid var(--c-primary);
  border-right: 1.5px solid var(--c-primary);
  transform: rotate(45deg);
  transition: transform var(--duration);
}
.l-drawer ul a:active,
.l-drawer ul a:hover { background: var(--c-primary-pale); }
.l-drawer ul a:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.l-drawer__foot {
  margin-top: var(--sp-s);
  padding-top: var(--sp-s);
  border-top: 1px solid var(--c-base-very-pale);
  display: grid; gap: var(--sp-2xs); justify-items: stretch;
}
.l-drawer__foot .c-button { justify-content: center; padding-block: .8em; font-size: var(--fs-s); }
@media (min-width: 901px) { .l-drawer { display: none; } }

/* ============================================================
   ファーストビュー
   文字を写真に重ねない構成。上が白地の文章、下が横いっぱいの写真。
   手持ちの写真7枚すべてを実測したところ、幕をかけずに文字を重ねると
   黒文字でも白文字でも最良で2.3:1にしかならず、読める基準(4.5:1)に届かない。
   幕をかければ写真が見えなくなる。よって重ねるのをやめ、場所を分けた。
   写真は一切加工せず、そのままの明るさで出す。
   ============================================================ */
.p-fv {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 写真が出るまでの下地。黒だと開いた瞬間に真っ黒に見え、黒文字も読めなくなる（2026-09-23 社長指摘）。
     写真の左側（文字を置く側）の平均色 #faf4f1 に近い明るい色にしてある */
  background: #f2efeb;
  min-height: clamp(650px, 43vw, 720px);
  display: grid;
  align-items: center;
}

/* 写真：FV全面。幕はかけない。加工もしない */
.p-fv__visual {
  position: absolute;
  z-index: 0;
  inset: 0;
}
.p-fv__visual img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 62% 56%;
}

.p-fv__inner {
  position: relative;
  z-index: 2;
  /* ヘッダーと同じ枠。1440pxで止めると社長の画面（約2500px）で
     文字が写真の白い部分からはみ出して建物に重なるため、--w-large に合わせる */
  width: min(100% - var(--sp-m) * 2, var(--w-large));
  margin-inline: auto;
}

/* ---- コピー ---- */
.p-fv__copy {
  /* この写真は左が白くぼけて右に建物が来る作りで、左に文字を置く前提で撮られている。
     実測でも左半分は黒文字で中央値16:1、中央だと最悪1.1:1まで落ちる。
     だから幕もカードも使わず、写真が明るい左側に黒文字を置く */
  /* 1440pxまでは620px。社長の画面（約2500px）では896pxまで広げる（2026-09-11の記録に合わせた） */
  max-width: clamp(620px, 35vw, 896px);
  margin-right: auto;
  text-align: left;
}
.p-fv__eyebrow {
  display: flex; align-items: center; justify-content: flex-start; gap: .75em;
  font-family: var(--font-sub);
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  line-height: 1.2;
  color: var(--c-primary);
}
/* 日本語の小見出し用。英字用の書体と広い字間は読みにくいので外す */
.p-fv__eyebrow--ja {
  font-family: var(--font-main);
  letter-spacing: .04em;
  /* 折れてよいのは「の」の後だけ。「運/用」のように1字だけ次の行に残さない */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 文字の前の飾りの棒は付けない（2026-09-29 社長「最初の棒いらん」） */
.p-fv__eyebrow::before, .p-fv__eyebrow::after { content: none; }
.p-fv__title {
  /* 44〜60px。FV全体を700px前後に収めるため、上限を下げた */
  /* 1440pxでは49px（従来どおり）。大きい画面では72pxまで。72pxなら896pxの幅に「賃貸経営を、長く安定して」が1行で入る */
  /* PCでは「長く安定して続けるために。」（13字）が列の幅に1行で入る大きさまでにする。原稿どおり2行で見せる（2026-09-29） */
  font-size: min(clamp(2.75rem, 3.4vw, 4.5rem), calc(clamp(620px, 35vw, 896px) / 13));
  font-weight: var(--fw-bold);
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--c-base);
  margin-top: 1.375rem;
  /* 語の途中で折り返さない。折れてよいのは「、」の後と「安定して」の後だけ（2026-09-29 社長「FVの改行おかしいのはあかん」） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.p-fv__title em {
  font-style: normal;
  position: relative;
}
/* 中央寄せにしたら下線が2行目とぶつかるので出さない */
.p-fv__title em::after { content: none; }
.p-fv__sub {
  font-size: clamp(1.0625rem, .9vw, 1.375rem);
  line-height: 1.85;
  color: var(--c-base-deep);
  margin-top: 1.375rem;
}
.p-fv__sub + .p-fv__sub { margin-top: .9em; }
.p-fv__sub { margin-inline: 0; }
.p-fv__sub strong {
  font-weight: var(--fw-bold);
  box-shadow: inset 0 -.45em 0 var(--c-primary-pale);
}
.p-fv__actions {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--sp-xs);
  margin-top: 1.75rem;
}
.p-fv__link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding-block: .65em;
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--c-base);
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.p-fv__link span { transition: transform var(--duration) var(--ease); }
.p-fv__link:hover { color: var(--c-primary-deep); border-color: var(--c-primary-deep); }
.p-fv__link:hover span { transform: translateX(4px); }
.p-fv__assurance {
  margin-top: var(--sp-m);
  padding-left: 1em;
  border-left: 2px solid var(--c-primary);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  color: var(--c-base-deep);
}

@media (max-width: 900px) {
  .p-fv { padding-top: var(--sp-m); }
  .p-fv__inner { padding-bottom: var(--sp-m); }
  .p-fv__title { margin-top: 1rem; }
  .p-fv__sub { margin-top: 1rem; }
  .p-fv__actions { margin-top: 1.375rem; }
  /* 幅が狭くなるので、PC用の最大幅だけ解除する（中央寄せは保つ） */
  .p-fv__inner { width: min(100% - var(--sp-m) * 2, var(--w-large)); }
  .p-fv__copy { max-width: none; }
  .p-fv__title { font-size: clamp(2.5rem, 6vw, 3.25rem); letter-spacing: normal; }
  .p-fv__sub { font-size: 1rem; line-height: var(--lh-s); }
  .p-fv { min-height: 34rem; }
  /* 狭い画面では写真の白くぼけた左側を出す。ここに文字が乗る */
  .p-fv__visual img { object-position: 14% center; }
}
@media (max-width: 560px) {
  .p-fv { min-height: 33rem; }
  .p-fv__title { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }
  .p-fv__sub { line-height: 1.8; }
  .p-fv__actions { align-items: flex-start; flex-direction: column; gap: var(--sp-xs); }
  .p-fv__actions .c-button { width: 100%; justify-content: center; }
  .p-fv__link { padding-left: .2em; }
}

/* FV直下の実績数字：白が続きメリハリがなくなるため、塗りではなく見出しと罫線で区切る
   （グレー塗りは重く暗い印象になったため、白のまま明るく見せる方式に変更） */
/* 白地の中に数字だけが浮くと殺風景に見えるため、帯として面を敷く */
.p-stats { background: var(--c-bg-sub); }

/* 数字の上に置く見出し。「管理実績」＋一行の補足 */
.p-stats__head { text-align: center; margin-bottom: var(--sp-l); }
.p-stats__head h2 {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--c-base); line-height: var(--lh-xs);
}
.p-stats__head p {
  margin-top: var(--sp-2xs);
  font-size: var(--fs-m); color: var(--c-base-deep);
}
.p-stats--sub { padding-block: var(--sp-xl); }

/* 項目ごとの絵：木造アパート／RCマンション／複数棟 を線画で描き分ける */
.p-stats__icon {
  display: block;
  width: clamp(44px, 4.5vw, 56px);
  aspect-ratio: 1;
  margin: 0 auto var(--sp-2xs);
  color: var(--c-primary);
}
.p-stats__icon svg { width: 100%; height: 100%; display: block; }
.p-stats__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  /* 絵・見出し・数字・注記の4段。項目ごとに高さが違っても、
     3列の同じ段どうしが同じ高さになるので数字の位置がそろう */
  grid-template-rows: auto auto auto auto;
}
.p-stats__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: var(--sp-s) var(--sp-m);
  text-align: center;
}
.p-stats__item + .p-stats__item { border-left: 1px solid var(--c-base-very-pale); }
/* 数字が大きいぶん、見出しが弱いと何の数字か伝わらない。
   このサイトの決め事どおり、見出しは純黒・太字ではっきり出す */
.p-stats__label {
  font-size: var(--fs-m);
  font-weight: var(--fw-bold);
  line-height: var(--lh-s);
  letter-spacing: .02em;
  color: var(--c-base);
}
.p-stats__num {
  font-family: var(--font-sub);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -.01em;
  /* 黒のままだと重いので、ブランドカラーで軽やかに見せる */
  color: var(--c-primary);
  margin-top: .1em;
}
.p-stats__num .unit { font-size: .34em; margin-left: .2em; }
.p-stats__note { font-size: 13px; line-height: var(--lh-s); color: var(--c-base-light); margin-top: .4em; }
/* スマホでも横3列のまま。縦に積むと1画面に収まらず、
   数字を見比べられなくなる（2026-09-12 社長指示で縦積みをやめた） */
@media (max-width: 820px) {
  .p-stats__item { padding: var(--sp-2xs) 6px; }
  .p-stats__icon { width: 34px; margin-bottom: 6px; }
  .p-stats__label {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.45;
  }
  .p-stats__num { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .p-stats__num .unit { font-size: .38em; margin-left: .1em; }
  .p-stats__note { font-size: 11px; line-height: 1.5; }
}
@media (max-width: 380px) {
  .p-stats__label { font-size: 11px; }
}

/* 2項目版。スマホ用の指定は必ずこの下に置く（上の一括ルールより後ろでないと効かない） */
.p-stats__list--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) {
  .p-stats__list--2 { grid-template-columns: 1fr; }
}


/* ============================================================
   ABOUT：企画から管理まで一貫（見出し＋リード＋右に大きな写真）
   ============================================================ */
.p-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: var(--sp-2xl);
  align-items: center;
}
/* 100%（段の幅）ではなく画面幅から枠の左端を出す。段の幅で計算すると大きい画面で負の値になり、文字が画面の左端に張り付いていた */
.p-about__body { padding-left: max(var(--gutter), (100vw - var(--w-large)) / 2); }
.p-about__text { margin-top: var(--sp-s); font-size: var(--fs-l); }
.p-about__text + .p-about__text { margin-top: 1em; }
.p-about__photo {
  border-radius: var(--radius-oval) 0 0 var(--radius-oval);
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.p-about__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-about__license { margin-top: var(--sp-m); font-size: var(--fs-s); color: var(--c-base-light); }
/* 新築プランニングは写真を左に置いて、上のセクションと左右を入れ替える。
   **本文の内側の余白も必ず反対側へ移すこと。**
   移さないと、左に大きな余白・右は余白ゼロになり、文字が画面の右端に張り付く */
.p-about__inner--rev { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.p-about__inner--rev .p-about__photo {
  grid-column: 1; grid-row: 1;
  border-radius: 0 var(--radius-oval) var(--radius-oval) 0;
}
.p-about__inner--rev .p-about__body {
  grid-column: 2; grid-row: 1;
  padding-left: 0;
  padding-right: max(var(--gutter), (100vw - var(--w-large)) / 2);
}
@media (max-width: 1024px) {
  .p-about__inner { grid-template-columns: 1fr; gap: var(--sp-l); }
  .p-about__body { padding-left: 0; width: min(100% - var(--gutter) * 2, var(--w-basic)); margin-inline: auto; }
  .p-about__photo { aspect-ratio: 16 / 9; border-radius: 0 var(--radius-oval) var(--radius-oval) 0; margin-right: var(--gutter); }
  /* 1カラムになるので、左右の入れ替えは解除する */
  .p-about__inner--rev { grid-template-columns: 1fr; }
  .p-about__inner--rev .p-about__photo,
  .p-about__inner--rev .p-about__body { grid-column: 1; grid-row: auto; }
  .p-about__inner--rev .p-about__body { padding-right: 0; }
}

/* ============================================================
   REASONS：選ばれる理由（番号＋写真＋本文の3カラム）
   ============================================================ */
.p-reason__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl) var(--sp-m);
  margin-top: var(--sp-2xl);
}
.p-reason__item { display: grid; gap: var(--sp-xs); }
.p-reason__photo {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.p-reason__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.p-reason__item:hover .p-reason__photo img { transform: scale(1.05); }
.p-reason__no {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--font-sub);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-white);
  background: var(--c-primary);
  padding: .18em .5em .12em;
  border-radius: 0 var(--radius-l) 0 0;
}
.p-reason__item .title-2 { margin-top: var(--sp-2xs); }
.p-reason__item p { font-size: var(--fs-m); }
@media (max-width: 1024px) { .p-reason__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .p-reason__list { grid-template-columns: 1fr; } }

/* ============================================================
   WORKS：企画実績スライダー
   ============================================================ */
.p-works__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-m); flex-wrap: wrap;
}
.p-works__viewport {
  overflow: hidden; margin-top: var(--sp-2xl);
  /* 流れている途中のカードが端でぶつ切りに見えないよう、左右の端だけ薄く消す */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
/* カードが左へ流れ続ける。同じ並びを2組置き、1組ぶん進んだところで先頭に戻すので切れ目が出ない。
   マウスを乗せたときとキーボードで触れたときは止まる。 */
.p-works__track {
  display: flex; gap: var(--sp-s);
  width: max-content;
  animation: works-flow 72s linear infinite;
}
.p-works__track:hover,
.p-works__track:focus-within { animation-play-state: paused; }
@keyframes works-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--sp-s) / 2)); }
}
/* トラックの幅が中身で決まるため、カード幅は画面基準で指定する（％だと決まらない） */
.p-works__card { flex: 0 0 clamp(220px, 21vw, 300px); }
.p-works__thumb {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.p-works__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.p-works__card:hover .p-works__thumb img { transform: scale(1.05); }
.p-works__badge {
  position: absolute; left: 0; top: 0; z-index: 2;
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1;
  padding: .55em .9em;
  background: var(--c-primary);
  color: var(--c-white);
  border-radius: 0 0 var(--radius-l) 0;
}
.p-works__badge--rc { background: var(--c-base-deep); }
.p-works__card .title-3 { margin-top: var(--sp-xs); }
.p-works__meta { font-family: var(--font-sub); font-size: var(--fs-s); color: var(--c-base-light); letter-spacing: .02em; }
.p-works__nav { display: flex; gap: var(--sp-2xs); }
.p-works__btn {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-base-pale);
  transition: background-color var(--duration), color var(--duration), box-shadow var(--duration);
}
.p-works__btn:hover:not(:disabled) { background: var(--c-primary); color: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-primary); }
.p-works__btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 820px) { .p-works__card { flex-basis: 46vw; } }
@media (max-width: 560px) { .p-works__card { flex-basis: 68vw; } }
/* 動きを減らす設定のときは流さず、指でなぞって見られるようにする（2組目は隠す） */
@media (prefers-reduced-motion: reduce) {
  .p-works__track { animation: none; width: auto; }
  .p-works__track [aria-hidden="true"] { display: none; }
  .p-works__viewport { overflow-x: auto; }
}

/* ============================================================
   VOICE：オーナーの声（取材中の告知）
   ============================================================ */
.p-voice__notice {
  margin-top: var(--sp-l);
  padding: var(--sp-m);
  background: var(--c-white);
  border-radius: var(--radius-l);
  border-left: 4px solid var(--c-primary);
}
.p-voice__notice .title-3 { margin-bottom: .3em; }

/* --- オーナー様の声（見せ方の比較用。採用しない方は削除する） --- */
.p-voice__demo {
  margin-top: var(--sp-l);
  padding: var(--sp-s) var(--sp-m);
  background: #fff4e5;
  border-radius: var(--radius);
  font-size: var(--fs-s); line-height: var(--lh-s); color: #8a5a00;
}
.p-voice__ab {
  margin-top: var(--sp-2xl);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  color: var(--c-base-light); letter-spacing: .08em;
}
/* 縦に伸びないよう、必ず横一列。入り切らない分は横に流して見る */
.p-voice__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  gap: var(--sp-s); margin-top: var(--sp-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--sp-2xs);
  overscroll-behavior-x: contain;
}
.p-voice__card { scroll-snap-align: start; }
.p-voice__card {
  background: var(--c-white);
  border-radius: var(--radius-l);
  padding: var(--sp-m);
  display: grid; gap: var(--sp-xs); align-content: start;
}
/* 写真が入る枠。中身が決まるまでは灰色の面だけを置く */
.p-voice__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--c-base-very-pale);
  box-shadow: inset 0 0 0 1px var(--c-base-pale);
  display: grid; place-items: center;
  color: var(--c-base-light); font-size: var(--fs-s);
}
.p-voice__text { font-size: var(--fs-m); line-height: var(--lh-s); color: var(--c-base-deep); }
.p-voice__name { font-size: var(--fs-s); color: var(--c-base-light); }


/* ============================================================
   FLOW：企画から出口までの流れ
   ============================================================ */
.p-flow__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-s);
  margin-top: var(--sp-2xl);
  counter-reset: flow;
}
.p-flow__item {
  counter-increment: flow;
  position: relative;
  background: var(--c-bg-sub);
  border-radius: var(--radius-l);
  padding: var(--sp-m);
  display: grid; gap: var(--sp-2xs);
  align-content: start;
}
.p-flow__no {
  font-family: var(--font-sub);
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  color: var(--c-primary);
}
.p-flow__item p { font-size: var(--fs-m); line-height: var(--lh-s); color: var(--c-base-deep); }
.p-flow__icon {
  display: block;   /* 親がgrid以外でも幅・高さが効くようにしておく */
  width: 40px; height: 40px;
  color: var(--c-primary);
  margin-bottom: var(--sp-2xs);
}
.p-flow__icon svg { width: 100%; height: 100%; display: block; }
@media (max-width: 820px) { .p-flow__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .p-flow__list { grid-template-columns: 1fr; gap: var(--sp-2xs); }
  .p-flow__item { row-gap: 2px; padding: var(--sp-s); }
}

/* ============================================================
   BUSINESS：事業内容（大きめ2×2）
   ============================================================ */
.p-business__list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-m);
  margin-top: var(--sp-2xl);
}
.p-business__item {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: var(--sp-m);
  align-items: center;
  padding: var(--sp-m);
  background: var(--c-white);
  border-radius: var(--radius-l);
  transition: box-shadow var(--duration);
}
.p-business__item:hover { box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.p-business__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.p-business__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.p-business__item:hover .p-business__photo img { transform: scale(1.05); }
.p-business__no {
  font-family: var(--font-sub); font-size: var(--fs-s);
  font-weight: var(--fw-bold); letter-spacing: .1em; color: var(--c-primary);
}
.p-business__body p { font-size: var(--fs-m); line-height: var(--lh-s); margin-top: .4em; }
.p-business__body .c-link { margin-top: var(--sp-xs); font-size: var(--fs-s); }
@media (max-width: 820px) { .p-business__list { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  /* スマホでは写真を左に小さく置く。上に大きく置くと4枚で1,800px超になっていた（2026-09-24） */
  .p-business__list { gap: var(--sp-xs); }
  .p-business__item { grid-template-columns: 88px minmax(0, 1fr); gap: var(--sp-xs); align-items: start; padding: var(--sp-s); }
  .p-business__photo { aspect-ratio: 1; }
}

/* ============================================================
   MESSAGE：代表挨拶
   ============================================================ */
.p-message__inner {
  display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
  gap: var(--sp-2xl); align-items: start;
}
.p-message__photo { border-radius: var(--radius-l); overflow: hidden; }
.p-message__profile { margin-top: var(--sp-s); }
.p-message__role { font-size: var(--fs-s); color: var(--c-base-light); }
.p-message__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.3; }
.p-message__text { font-size: var(--fs-m); }
.p-message__text + .p-message__text { margin-top: 1em; }
.p-message__text mark {
  background: none;
  color: inherit;
  font-weight: var(--fw-bold);
  box-shadow: inset 0 -.4em 0 var(--c-primary-pale);
}
@media (max-width: 820px) {
  .p-message__inner { grid-template-columns: 1fr; gap: var(--sp-l); }
  .p-message__photo { max-width: 320px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.p-faq__list { display: grid; gap: 2px; margin-top: var(--sp-2xl); }
.p-faq__item { background: var(--c-white); border-radius: var(--radius); overflow: hidden; }
/* 白地のセクションに置く場合は、カードが背景に溶けないよう薄いグレーに反転させる */
.p-faq__list--on-white .p-faq__item { background: var(--c-bg-sub); }
.p-faq__list--on-white .p-faq__item summary:hover { background: var(--c-primary-pale); }
.p-faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--sp-xs);
  padding: var(--sp-s) calc(var(--sp-m) + 24px) var(--sp-s) var(--sp-s);
  position: relative;
  font-size: var(--fs-l); font-weight: var(--fw-bold); line-height: var(--lh-s);
  transition: background-color var(--duration);
}
.p-faq__item summary::-webkit-details-marker { display: none; }
.p-faq__item summary:hover { background: var(--c-primary-pale); }
.p-faq__item summary::before {
  content: "Q"; flex: none;
  font-family: var(--font-sub);
  color: var(--c-primary);
  font-size: 1.1em; line-height: 1.3;
}
.p-faq__item summary::after {
  content: ""; position: absolute; right: var(--sp-s); top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--c-base); border-bottom: 2px solid var(--c-base);
  transform: rotate(45deg);
  transition: transform var(--duration);
}
.p-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.p-faq__answer { padding: 0 var(--sp-m) var(--sp-s) calc(var(--sp-s) + 1.6em); }
.p-faq__answer p { font-size: var(--fs-m); }
/* 答えが2段落以上になるときに、行が続いて見えないよう間を空ける */
.p-faq__answer p + p { margin-top: var(--sp-xs); }
.p-faq__todo {
  display: inline-block;
  background: #fff4e5; color: #8a5a00;
  border-radius: var(--radius-oval);
  padding: .1em .8em; margin-right: .4em;
  font-size: var(--fs-s); font-weight: var(--fw-bold);
}

/* ============================================================
   COMPANY / AREA：会社情報・拠点
   ============================================================ */
.p-company__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
  gap: var(--sp-2xl); align-items: start;
}
.p-company__table { width: 100%; margin-top: var(--sp-l); }
.p-company__table th, .p-company__table td {
  padding: var(--sp-xs) 0;
  font-size: var(--fs-m);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--c-base-very-pale);
  line-height: var(--lh-s);
}
.p-company__table th { width: 9em; font-weight: var(--fw-bold); color: var(--c-base-light); white-space: nowrap; }
.p-company__photo { border-radius: var(--radius-l); overflow: hidden; }
.p-area__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-s); margin-top: var(--sp-l); }
.p-area__item { padding: var(--sp-s); background: var(--c-bg-sub); border-radius: var(--radius); }
.p-area__item dt { font-weight: var(--fw-bold); font-size: var(--fs-l); }
.p-area__item dd { font-size: var(--fs-m); line-height: var(--lh-s); margin-top: .3em; }
.p-area__item .tel { font-family: var(--font-sub); font-weight: var(--fw-bold); }
@media (max-width: 900px) {
  .p-company__inner { grid-template-columns: 1fr; gap: var(--sp-l); }
  .p-area__list { grid-template-columns: 1fr; }
}

/* ============================================================
   COLUMN / NEWS
   ============================================================ */
.p-list__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-m); flex-wrap: wrap; }

.p-column__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-m); margin-top: var(--sp-2xl); }
.p-column__item { display: grid; gap: var(--sp-xs); }
.p-column__thumb { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
.p-column__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.p-column__item:hover .p-column__thumb img { transform: scale(1.05); }
.p-column__cat {
  justify-self: start;
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1;
  padding: .5em .9em;
  border-radius: var(--radius-oval);
  background: var(--c-primary-pale); color: var(--c-primary-deep);
}
@media (max-width: 900px) { .p-column__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .p-column__list { grid-template-columns: 1fr; } }

.p-news__list { margin-top: var(--sp-2xl); border-top: 1px solid var(--c-base-very-pale); }
.p-news__item { border-bottom: 1px solid var(--c-base-very-pale); }
.p-news__item a {
  display: grid; grid-template-columns: 8em 6em minmax(0, 1fr);
  gap: var(--sp-s); align-items: center;
  padding: var(--sp-s) var(--sp-2xs);
  transition: background-color var(--duration);
}
.p-news__item a:hover { background: var(--c-bg-sub); }
.p-news__date { font-family: var(--font-sub); font-size: var(--fs-s); color: var(--c-base-light); letter-spacing: .04em; }
.p-news__tag {
  justify-self: start;
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1;
  padding: .5em .9em; border-radius: var(--radius-oval);
  background: var(--c-primary-pale); color: var(--c-primary-deep);
}
.p-news__text { font-size: var(--fs-m); font-weight: var(--fw-bold); line-height: var(--lh-s); }
@media (max-width: 640px) {
  .p-news__item a { grid-template-columns: auto 1fr; gap: var(--sp-2xs) var(--sp-xs); }
  .p-news__text { grid-column: 1 / -1; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.p-contact { background: var(--c-primary-deep); color: var(--c-white); }
.p-contact .title-1__main { color: var(--c-white); }
.p-contact .title-1__sub { color: var(--c-primary-pale); }
.p-contact .title-1-wrap > p { color: var(--c-white); }
.p-contact__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-m); margin-top: var(--sp-2xl);
}
.p-contact__box {
  background: var(--c-white); color: var(--c-base);
  border-radius: var(--radius-l);
  padding: var(--sp-l);
  display: grid; align-content: start; gap: var(--sp-2xs);
}
.p-contact__label { font-size: var(--fs-s); color: var(--c-base-light); font-weight: var(--fw-bold); }
.p-contact__tel {
  font-family: var(--font-sub);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: .01em;
}
.p-contact__box .c-button { margin-top: var(--sp-xs); justify-content: center; }
.p-contact__hours { font-size: var(--fs-s); color: var(--c-base-light); }
@media (max-width: 820px) { .p-contact__grid { grid-template-columns: 1fr; } }

/* ============================================================
   フッター
   ============================================================ */
/* フッターは白地・黒文字。
   黒地にするとロゴを白い板で囲う必要が出て、そこだけ貼り紙のように浮く。
   白地ならロゴがそのまま置けて、本文とも地続きになる。 */
.l-footer {
  background: var(--c-white);
  color: var(--c-base-deep);
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--c-base-very-pale);
}
.l-footer__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-2xl);
  padding-bottom: var(--sp-2xl);
}
.l-footer__logo { width: fit-content; }
.l-footer__logo img { width: 180px; }
/* ご入居者様専用LINE（表記とボタンだけ。用途の説明は書かない） */
.l-footer__line { margin-top: var(--sp-s); }
.l-footer__line-label { font-size: var(--fs-s); color: var(--c-base-light); margin-bottom: .4em; }
/* フッターのFacebook。埋め込みは幅が決まっているので、列の幅に合わせて縮める */
.l-footer__fb { margin-top: var(--sp-s); }
.l-footer__fb .fb-page { margin-top: var(--sp-2xs); display: block; }
.l-footer__fb .fb-page,
.l-footer__fb .fb-page span,
.l-footer__fb iframe { max-width: 100% !important; }

/* フッターのSNSリンク（いまはFacebookのみ） */
.l-footer__sns { margin-top: var(--sp-xs); }
.l-footer__sns a {
  display: inline-flex; align-items: center; gap: .5em;
  /* フッターの地は白。薄い色にすると読めなくなるので、他のリンクと同じ濃さにする */
  font-size: var(--fs-s); color: var(--c-base-deep);
  transition: color var(--duration);
}
.l-footer__sns a:hover { color: var(--c-primary); }
.l-footer__sns svg { flex: none; }
.l-footer__line a { display: inline-block; line-height: 0; transition: opacity var(--duration); }
.l-footer__line a:hover { opacity: .8; }
.l-footer__line img { width: 116px; height: 36px; border-radius: 4px; }
.l-footer__address { margin-top: var(--sp-s); font-size: var(--fs-s); line-height: var(--lh-s); }
.l-footer__address + .l-footer__address { margin-top: var(--sp-xs); }
.l-footer__license { margin-top: var(--sp-s); font-size: 13px; line-height: var(--lh-s); color: var(--c-base-light); }
.l-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-m); }
.l-footer__nav-head {
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  color: var(--c-base);
  padding-bottom: .6em; margin-bottom: .6em;
  border-bottom: 1px solid var(--c-base-pale);
}
.l-footer__nav li { margin-bottom: .4em; }
.l-footer__nav a { font-size: var(--fs-s); color: var(--c-base-deep); transition: color var(--duration); }
.l-footer__nav a:hover { color: var(--c-primary); }
.l-footer__copy {
  border-top: 1px solid var(--c-base-very-pale);
  padding-block: var(--sp-s);
  font-size: 12px;
  display: flex; gap: var(--sp-s); flex-wrap: wrap; justify-content: center;
  color: var(--c-base-light);
}
.l-footer__copy a:hover { color: var(--c-primary); }
@media (max-width: 900px) {
  .l-footer__inner { grid-template-columns: 1fr; gap: var(--sp-l); }
  .l-footer__nav { grid-template-columns: repeat(2, 1fr); }
}

/* 本文の締めに置くCTA。上下を同じだけ空けて詰まりを出さない */
.p-cta-block { padding-block: var(--sp-2xl); }

/* ページ内の見出しへ飛ばす切替（FAQのオーナー／入居者など） */
.p-jump { display: flex; gap: var(--sp-xs); justify-content: center; flex-wrap: wrap; }
.p-jump a {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.6em;
  border-radius: var(--radius-oval);
  font-size: var(--fs-m); font-weight: var(--fw-bold);
  color: var(--c-base);
  box-shadow: inset 0 0 0 1px var(--c-base-pale);
  transition: background-color var(--duration), color var(--duration), box-shadow var(--duration);
}
/* 矢印記号は使わない決まり（仕事/.claude/rules/web-制作.md）。ボタンは記号なし（2026-09-23 下向きの矢印を外した） */
.p-jump a:hover { background: var(--c-primary); color: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-primary); }

/* 見出しと補足を中央に置くセクション頭 */
.p-doc-head { text-align: center; margin-bottom: var(--sp-l); }
.p-doc-head .en {
  display: block; font-family: var(--font-sub);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  letter-spacing: .2em; color: var(--c-primary);
}
.p-doc-head h2 {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--c-base); margin-top: var(--sp-2xs);
}
.p-doc-head p { font-size: var(--fs-m); color: var(--c-base-deep); margin-top: var(--sp-xs); }

/* SP固定CTA */
.l-sticky { display: none; }
@media (max-width: 820px) {
  .l-sticky {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0; z-index: 90;
  }
  .l-sticky a {
    text-align: center; padding: 1.1em .5em;
    font-size: var(--fs-s); font-weight: var(--fw-bold);
  }
  .l-sticky__tel { background: var(--c-primary-deep); color: var(--c-white); }
  .l-sticky__form { background: var(--c-accent); color: var(--c-white); }
  body { padding-bottom: 56px; }
}
/* 320px級の画面では「ご入居者様専用ダイヤル」「092-719-0322 に電話」が2行に折れて帯が90pxになる。
   文字を少し小さくして1行に収める（2026-09-24） */
@media (max-width: 360px) {
  .l-sticky a { font-size: 13px; padding-inline: .25em; white-space: nowrap; }
}

/* ============================================================
   下層ページ共通：パンくず・ページ見出し・本文セクション
   ============================================================ */
.p-breadcrumb {
  background: var(--c-bg-sub);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--sp-2xs);
}
.p-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.p-breadcrumb li { display: flex; align-items: center; gap: .5em; font-size: var(--fs-s); color: var(--c-base-light); }
.p-breadcrumb a { color: var(--c-primary); font-weight: var(--fw-bold); }
.p-breadcrumb a:hover { text-decoration: underline; }
.p-breadcrumb li:not(:first-child)::before { content: "/"; color: var(--c-base-pale); }

.p-page-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--c-primary-deep) 0%, var(--c-primary) 130%);
  color: var(--c-white);
  min-height: clamp(15rem, 22vw, 21rem);
  display: grid; align-items: center;
  padding-block: var(--sp-xl);
  text-align: center;
}

/* 背景写真。ページごとに内容と関係のある1枚を敷く */
.p-page-header__bg { position: absolute; inset: 0; z-index: 0; }
.p-page-header__bg img { width: 100%; height: 100%; object-fit: cover; }
/* 写真の上に濃紺の膜をかける。
   最も薄い箇所でも白文字が 5.3:1 を保てる濃さにしてある（AA基準4.5） */
.p-page-header__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(10,74,97,.93) 0%, rgba(10,74,97,.87) 55%, rgba(13,95,125,.86) 100%);
}
/* 背景に薄く敷く格子。他のバンドと同じあしらいで揃える */
.p-page-header::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}
.p-page-header > .l-inner { position: relative; z-index: 2; }
.p-page-header__eyebrow {
  font-family: var(--font-sub);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  letter-spacing: .22em; color: var(--c-primary-pale);
}
.p-page-header h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  margin-top: var(--sp-2xs);
}
.p-page-header p { font-size: var(--fs-m); color: var(--c-primary-pale); margin-top: var(--sp-xs); }

/* 本文セクション（トップの中央寄せ見出しと区別し、左寄せの読み物として使う） */
.p-doc { padding-block: var(--section); }
.p-doc + .p-doc { border-top: 1px solid var(--c-base-very-pale); }
.p-doc-h2 {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--c-base); letter-spacing: normal;
  padding-left: var(--sp-xs);
  border-left: 4px solid var(--c-primary);
  margin-bottom: var(--sp-l);
}
.p-doc-body p { margin-bottom: var(--sp-xs); }
.p-doc-lead { font-size: var(--fs-m); color: var(--c-base-deep); margin-bottom: var(--sp-s); }
.p-doc-list li {
  position: relative; padding-left: 1.3em; margin-bottom: var(--sp-2xs);
  font-size: var(--fs-m);
}
.p-doc-list li::before { content: "―"; position: absolute; left: 0; color: var(--c-primary); }

/* 本文＋写真の2カラム（幅が広い画面で右が空白にならないよう添える） */
.p-doc-grid {
  display: grid; grid-template-columns: 1.3fr .7fr;
  gap: var(--sp-2xl); align-items: start;
}
/* 左がリスト・右がバナーのように分量差が出る組み合わせは、左右を均等に近づける */
.p-doc-grid--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .p-doc-grid--even { grid-template-columns: 1fr; } }
.p-doc-photo { border-radius: var(--radius-l); overflow: hidden; }
.p-doc-photo-cap { font-size: var(--fs-s); color: var(--c-base-light); margin-top: var(--sp-xs); text-align: center; }
/* 写真を添えるほどでない単独ブロックは中央に置いて左右の余白を揃える */
.p-doc-center { max-width: 46rem; margin-inline: auto; }
@media (max-width: 900px) { .p-doc-grid { grid-template-columns: 1fr; gap: var(--sp-l); } }

/* 会社情報テーブル */
.p-company-table { width: 100%; border-collapse: collapse; }
.p-company-table th, .p-company-table td {
  padding: var(--sp-xs) 0; text-align: left; vertical-align: top;
  font-size: var(--fs-m); line-height: var(--lh-s);
  border-bottom: 1px solid var(--c-base-very-pale);
}
.p-company-table th { width: 8.5em; font-weight: var(--fw-bold); color: var(--c-base-light); white-space: nowrap; }
.p-company-table tr:last-child th, .p-company-table tr:last-child td { border-bottom: none; }
/* 取引銀行。名前の途中では折り返さず、間はスラッシュと余白で区切る。
   スラッシュは行末側に付けるので、折り返した行は必ず銀行名から始まる */
.p-bank-list { display: flex; flex-wrap: wrap; row-gap: .45em; }
.p-bank-list li { white-space: nowrap; }
.p-bank-list li:not(:last-child)::after {
  content: "／";
  color: var(--c-base-light);
  margin: 0 .45em;
}
/* スマホは表の右側が狭く1件ずつの行になる。全行の末尾にスラッシュが残ると 読みにくいので消す */
/* 所属団体は名称が長いので、区切り記号を使わず1件ずつ縦に並べる。
   銀行名と違って画面に収まらないため、折り返しは許す（禁止すると横にはみ出す） */
.p-bank-list--stack { flex-direction: column; gap: .35em; align-items: flex-start; }
.p-bank-list--stack li { white-space: normal; }
.p-bank-list--stack li:not(:last-child)::after { content: none; }

@media (max-width: 640px) {
  .p-bank-list li:not(:last-child)::after { content: none; }
  /* スラッシュを消したぶん、名前どうしがくっつかないよう横の余白を足す */
  .p-bank-list { gap: .3em 1.2em; }
}

/* 所属団体のロゴバナー。
   元画像の縦横比がバラバラ（320×100 / 608×262 / 489×48 など）なので、
   同じ大きさの枠に入れて中央に置く。並べたときに端が揃う。 */
.p-doc-banners {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-xs);
  align-content: start;
}
.p-doc-banners > * {
  display: grid; place-items: center;
  /* 行と列の大きさを枠に合わせて決める。これが無いと画像の max-height: 100% が効かず、枠からはみ出す */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  /* aspect-ratio は中身の縦横比に押し負けることがあるので高さを固定する */
  height: clamp(88px, 11vw, 116px);
  padding: var(--sp-xs);
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--c-base-very-pale);
  transition: box-shadow var(--duration);
  overflow: hidden;
}
.p-doc-banners a:hover { box-shadow: inset 0 0 0 1px var(--c-primary); }
.p-doc-banners img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
@media (max-width: 900px) { .p-doc-banners { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .p-doc-banners { grid-template-columns: repeat(2, 1fr); } }

/* 連絡先カード内の電話番号。押してもらう情報なので最も大きく置く。
   （.p-card p の指定に負けないよう、単独のクラスとして定義する） */
.p-tel {
  display: block;
  font-family: var(--font-sub);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--c-primary-deep);
  margin-block: .1em .15em;
}
.p-tel a { color: inherit; }
.p-tel a:hover { color: var(--c-primary); }

/* ------------------------------------------------------------
   お問い合わせフォーム
   ------------------------------------------------------------ */
.p-form { max-width: 44rem; margin-inline: auto; }
.p-form__row { margin-bottom: var(--sp-s); }
.p-form__label {
  display: flex; align-items: center; gap: .6em;
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  color: var(--c-base); margin-bottom: .4em;
}
.p-form__req {
  font-size: 13px; font-weight: var(--fw-bold); line-height: 1;
  padding: .35em .7em; border-radius: var(--radius-oval);
  background: var(--c-accent); color: var(--c-white);
}
.p-form__any {
  font-size: 13px; font-weight: var(--fw-bold); line-height: 1;
  padding: .35em .7em; border-radius: var(--radius-oval);
  background: var(--c-bg-sub); color: var(--c-base-light);
}
.p-form input[type="text"],
.p-form input[type="email"],
.p-form input[type="tel"],
.p-form select,
.p-form textarea {
  width: 100%;
  font: inherit; font-size: var(--fs-m); font-weight: var(--fw-medium);
  color: var(--c-base);
  background: var(--c-white);
  border: 1px solid var(--c-base-pale);
  border-radius: var(--radius);
  padding: .8em 1em;
  transition: border-color var(--duration), box-shadow var(--duration);
}
.p-form textarea { min-height: 10em; resize: vertical; line-height: var(--lh-s); }
.p-form select { cursor: pointer; }
.p-form :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(13, 95, 125, .18);
}
.p-form ::placeholder { color: var(--c-base-light); }
.p-form__submit { margin-top: var(--sp-l); display: flex; justify-content: center; }
.p-form__submit .c-button { min-width: 16rem; justify-content: center; }
/* 送信できない状態のときは、押せないことを見た目でも示す */
.p-form__submit .c-button[aria-disabled="true"] {
  background: var(--c-base-pale); color: var(--c-base-deep); cursor: not-allowed;
}
.p-form__submit .c-button[aria-disabled="true"] .c-button__arrow { background: var(--c-white); color: var(--c-base-light); }
.p-form__submit .c-button[aria-disabled="true"]:hover { background: var(--c-base-pale); }

/* ------------------------------------------------------------
   施策リスト：番号つきの解説を並べる（管理の8つの施策など）
   ------------------------------------------------------------ */
.p-measures {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-m);
  counter-reset: measure;
}
.p-measure {
  counter-increment: measure;
  background: var(--c-white);
  border-radius: var(--radius-l);
  padding: var(--sp-m);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-s); align-items: start;
}
.p-measure__no {
  flex: none;
  display: grid; place-items: center;
  width: 2.6em; height: 2.6em;
  border-radius: 50%;
  background: var(--c-primary); color: var(--c-white);
  font-family: var(--font-sub); font-size: var(--fs-l); font-weight: var(--fw-bold);
  line-height: 1;
}
.p-measure h3 {
  font-size: var(--fs-l); font-weight: var(--fw-bold);
  color: var(--c-base); line-height: var(--lh-xs);
}
.p-measure p { font-size: var(--fs-m); line-height: var(--lh-s); margin-top: var(--sp-2xs); }
/* 白地のセクションではカードを薄いグレーに反転させる */
.p-measures--on-white .p-measure { background: var(--c-bg-sub); }
@media (max-width: 860px) { .p-measures { grid-template-columns: 1fr; gap: var(--sp-s); } }

/* ------------------------------------------------------------
   パスワード保護エリア（仲介会社様向けの空室情報）
   ------------------------------------------------------------ */
.p-gate {
  background: var(--c-bg-sub);
  border-radius: var(--radius-l);
  padding: var(--sp-l);
  max-width: 40rem; margin-inline: auto;
  text-align: center;
}
.p-gate__icon {
  width: 46px; height: 46px; margin-inline: auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-primary-pale); color: var(--c-primary);
}
.p-gate__icon svg { width: 24px; height: 24px; }
.p-gate__title {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--c-base); margin-top: var(--sp-xs);
}
.p-gate__lead { font-size: var(--fs-s); line-height: var(--lh-s); margin-top: var(--sp-2xs); }
.p-gate__form { display: flex; gap: var(--sp-2xs); margin-top: var(--sp-m); flex-wrap: wrap; justify-content: center; }
.p-gate__form input {
  flex: 1 1 14rem; min-width: 0;
  font: inherit; font-size: var(--fs-m);
  padding: .85em 1.2em;
  border: 1px solid var(--c-base-pale);
  border-radius: var(--radius-oval);
  background: var(--c-white); color: var(--c-base);
}
.p-gate__form input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-color: var(--c-primary); }
.p-gate__form button { flex: none; }
.p-gate__error {
  margin-top: var(--sp-xs);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  color: var(--c-accent-deep);
}
.p-gate__error[hidden] { display: none; }
.p-gate__help { font-size: var(--fs-s); color: var(--c-base-light); margin-top: var(--sp-s); }

/* 解錠後に出るPDF一覧 */
.p-files { display: grid; gap: 2px; }
.p-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-s); align-items: center;
  background: var(--c-white);
  border-radius: var(--radius);
  padding: var(--sp-s) var(--sp-m);
  transition: background-color var(--duration);
}
.p-file:hover { background: var(--c-primary-pale); }
.p-file__icon {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--c-primary); color: var(--c-white);
  font-family: var(--font-sub); font-size: 12px; font-weight: var(--fw-bold);
}
.p-file__name { font-size: var(--fs-l); font-weight: var(--fw-bold); color: var(--c-base); line-height: var(--lh-xs); }
.p-file__meta { font-size: var(--fs-s); color: var(--c-base-light); margin-top: .2em; }
.p-file__meta .font-sub { letter-spacing: .03em; }
.p-file__action {
  flex: none; display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-s); font-weight: var(--fw-bold); color: var(--c-primary);
  white-space: nowrap;
}
.p-file__action::after {
  content: "";
  width: .45em; height: .45em;
  border-bottom: 1.5px solid var(--c-primary);
  border-right: 1.5px solid var(--c-primary);
  transform: rotate(45deg);
  transition: transform var(--duration);
}
.p-file:hover .p-file__action::after { transform: rotate(45deg) translate(2px, 2px); }
@media (max-width: 560px) {
  .p-file { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--sp-xs); }
  .p-file__action { grid-column: 1 / -1; justify-content: flex-start; }
}

/* 制作中であることの注記 */
.p-notice {
  background: #fff4e5;
  border-left: 4px solid #c98a00;
  border-radius: var(--radius);
  padding: var(--sp-s) var(--sp-m);
  margin-top: var(--sp-m);
}
.p-notice__title { font-size: var(--fs-s); font-weight: var(--fw-bold); color: #8a5a00; }
.p-notice p { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--c-base-deep); margin-top: .3em; }

/* ------------------------------------------------------------
   ご入居者様向け：LINE告知帯・連絡先・カード型リンク
   ------------------------------------------------------------ */
/* LINEの告知。表記とボタンだけを置き、用途の説明は書かない */
.p-line-announce {
  background: #eafcf1;
  border-block: 1px solid #b7ecc9;
  padding-block: var(--sp-s);
}
.p-line-announce__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-s); flex-wrap: wrap;
}
.p-line-announce__label {
  font-size: var(--fs-l); font-weight: var(--fw-bold);
  color: #05713a;   /* 白地に近い緑地で 4.9:1 を確保する */
  letter-spacing: .02em;
}
/* 案内文を添える版。左に説明、右に友だち追加ボタン */
.p-line-announce__body { display: grid; gap: .35em; }
.p-line-announce__body p { font-size: var(--fs-m); line-height: var(--lh-s); color: #05713a; }
.p-line-announce__note { font-weight: var(--fw-bold); }
@media (max-width: 760px) {
  .p-line-announce__inner { flex-direction: column; text-align: center; }
  .p-line-announce__body { justify-items: center; }
}

.p-line-announce a { display: inline-block; line-height: 0; transition: opacity var(--duration); }
.p-line-announce a:hover { opacity: .82; }
.p-line-announce img { width: 156px; height: 48px; }
@media (max-width: 560px) {
  .p-line-announce__label { font-size: var(--fs-m); }
  .p-line-announce img { width: 130px; height: 40px; }
}

/* 大きめのカード型リンク（次に読むページへ送る） */
.p-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-m); }
.p-card {
  display: grid; align-content: start; gap: var(--sp-2xs);
  background: var(--c-bg-sub);
  border-radius: var(--radius-l);
  padding: var(--sp-l);
  transition: background-color var(--duration), transform var(--duration);
}
.p-card:hover { background: var(--c-primary-pale); transform: translateY(-3px); }
.p-card h3 {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--c-base); line-height: var(--lh-xs);
}
.p-card p { font-size: var(--fs-m); line-height: var(--lh-s); }
.p-card .c-link { margin-top: var(--sp-xs); font-size: var(--fs-s); }
@media (max-width: 767px) { .p-cards { grid-template-columns: 1fr; gap: var(--sp-s); } }

/* 連絡先：電話番号を主役にする */
.p-contact-card {
  background: var(--c-primary-pale);
  border-radius: var(--radius-l);
  padding: var(--sp-l);
  text-align: center;
  max-width: 40rem; margin-inline: auto;
}
.p-contact-card__label { font-size: var(--fs-s); font-weight: var(--fw-bold); color: var(--c-primary-deep); }
.p-contact-card__tel {
  font-family: var(--font-sub);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-bold); line-height: 1.1;
  color: var(--c-primary-deep);
  margin-block: .1em .2em;
}
.p-contact-card__hours { font-size: var(--fs-s); color: var(--c-base-deep); }
.p-contact-card__line { margin-top: var(--sp-s); display: flex; align-items: center; justify-content: center; gap: var(--sp-xs); flex-wrap: wrap; }
.p-contact-card__line span { font-size: var(--fs-s); color: var(--c-base-deep); }
.p-contact-card__line a { display: inline-block; line-height: 0; transition: opacity var(--duration); }
.p-contact-card__line a:hover { opacity: .82; }
.p-contact-card__line img { width: 116px; height: 36px; }
.p-contact-card__note { font-size: var(--fs-s); color: var(--c-base-deep); margin-top: var(--sp-s); }

/* 読み物の小見出し（手順の各項目など） */
.p-doc-h3 {
  font-size: var(--fs-l); font-weight: var(--fw-bold);
  color: var(--c-base); line-height: var(--lh-s);
  margin-top: var(--sp-m); margin-bottom: var(--sp-2xs);
}
.p-doc-h3:first-child { margin-top: 0; }
/* 番号つきの手順見出し */
.p-doc-h3--num { display: flex; align-items: baseline; gap: .6em; }
.p-doc-h3--num::before {
  content: attr(data-no);
  font-family: var(--font-sub); color: var(--c-primary);
  font-size: 1.1em;
}

/* 濃紺バンドの中に置いた要素は白基調に反転させる */
.p-band .p-doc-head h2,
.p-band .title-2 { color: var(--c-white); }
.p-band .p-doc-head .en { color: var(--c-primary-pale); }
.p-band .p-doc-head p { color: var(--c-primary-pale); }
.p-band .p-flow__item { background: rgba(255,255,255,.07); }
.p-band .p-flow__item p { color: var(--c-primary-pale); }
.p-band .p-flow__no { color: var(--c-primary-pale); }
.p-band .p-flow__icon { color: var(--c-white); }
.p-band__lead {
  text-align: center;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.5; color: var(--c-white);
}
.p-band__lead em { font-style: normal; border-bottom: 4px solid var(--c-primary-pale); padding-bottom: .06em; }
.p-band__sub { text-align: center; font-size: var(--fs-m); color: var(--c-primary-pale); margin-top: var(--sp-xs); }
.p-band__note { text-align: center; font-size: var(--fs-s); color: var(--c-primary-pale); margin-top: var(--sp-l); }

/* 数字を4つ並べる場合 */
/* spanは既定でinlineのため、blockにしないと幅・高さが効かない */
.p-stat__icon { display: block; color: var(--c-primary); width: 32px; height: 32px; margin-bottom: var(--sp-2xs); }
.p-stat__icon svg { width: 100%; height: 100%; display: block; }

/* 取材待ちの掲載枠（事実が揃うまでの仮置き） */
.p-placeholders { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-s); margin-top: var(--sp-m); }
.p-placeholder {
  border: 1px dashed var(--c-base-pale);
  border-radius: var(--radius-l);
  padding: var(--sp-m);
  background: var(--c-white);
}
.p-placeholder__tag {
  font-family: var(--font-sub); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .1em; color: var(--c-base-light);
}
.p-placeholder p { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--c-base-deep); margin-top: .4em; }
@media (max-width: 900px) { .p-placeholders { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   主張見出し：ページの言いたいことを大きく1つ置く
   ------------------------------------------------------------ */
.p-claim { text-align: center; max-width: 56rem; margin-inline: auto; }
.p-claim__en {
  display: block; font-family: var(--font-sub);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  letter-spacing: .2em; color: var(--c-primary);
  margin-bottom: var(--sp-xs);
}
/* ラベルを日本語で置くとき。英字用の細長い書体は当てず、字間も詰める */
.p-claim__en--ja { font-family: var(--font-main); letter-spacing: .12em; }
.p-claim h2 {
  /* スマホでの下限は他の見出しとそろえる。大きすぎると1行に7〜8文字しか入らず、
     手で入れた改行の先がさらに折り返して読みにくくなる */
  /* 2026-09-23 本文の見出し（.p-doc-h2）と同じ段にそろえた。36pxだと1ページに大見出しが2種類並んでいた */
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.65; letter-spacing: normal;
  color: var(--c-base);
}
.p-claim p { font-size: var(--fs-l); margin-top: var(--sp-m); }
.p-claim p + p { margin-top: 1em; }
.p-claim--left { text-align: left; margin-inline: 0; max-width: 52rem; }
.p-claim--left .p-claim h2 { text-align: left; }
/* 文中で要点を通すマーカー。色ではなく下地の帯で示す */
/* スマホでだけ入れたい改行。狭い画面で見出しが変な位置で折り返すのを防ぐ */
.u-br-sp { display: none; }
@media (max-width: 560px) { .u-br-sp { display: inline; } }

.u-mark {
  font-weight: var(--fw-bold);
  box-shadow: inset 0 -.45em 0 var(--c-primary-pale);
}

/* ------------------------------------------------------------
   写真の帯：主張の下に敷いて、言葉を物件で裏づける
   ------------------------------------------------------------ */
.p-photo-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; margin-top: var(--sp-xl);
}
.p-photo-strip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .6s var(--ease);
}
.p-photo-strip > * { overflow: hidden; }
.p-photo-strip > *:first-child { border-radius: var(--radius-l) 0 0 0; }
.p-photo-strip > *:last-child { border-radius: 0 0 var(--radius-l) 0; }
.p-photo-strip img:hover { transform: scale(1.05); }
@media (max-width: 767px) { .p-photo-strip { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------
   数字：囲まず、上の罫線1本と特大の数字だけで見せる
   ------------------------------------------------------------ */
.p-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-l);
}
.p-stat { border-top: 2px solid var(--c-primary); padding-top: var(--sp-s); }
.p-stat__label { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--c-base-deep); }
.p-stat__num {
  font-family: var(--font-sub);
  font-size: var(--fs-4xl); font-weight: var(--fw-bold);
  line-height: 1.05; letter-spacing: -.01em;
  color: var(--c-primary-deep); margin-top: .1em;
}
.p-stat__num .unit { font-size: .36em; margin-left: .2em; }
.p-stat__note { font-size: 13px; line-height: var(--lh-s); color: var(--c-base-light); margin-top: .4em; }
@media (max-width: 767px) { .p-stat-row { grid-template-columns: 1fr; gap: var(--sp-m); } }

/* 数字を4つ並べる場合。基本定義より後に置かないと上書きされる */
.p-stat-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .p-stat-row--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .p-stat-row--4 { grid-template-columns: 1fr; } }

/* 数字を2つ並べる場合。こちらも基本定義より後に置く */
.p-stat-row--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) { .p-stat-row--2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   サービス一覧：枠を使わず、縦長の写真＋丸矢印で並べる
   ------------------------------------------------------------ */
.p-svc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-xl) var(--sp-l); }
.p-svc {
  display: grid; grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--sp-m); align-items: start;
}
.p-svc__photo { border-radius: var(--radius); overflow: hidden; }
.p-svc__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s var(--ease); }
.p-svc:hover .p-svc__photo img { transform: scale(1.06); }
.p-svc__head { display: flex; align-items: center; gap: .6em; }
/* 見出しの前に置く短い縦線。丸い矢印よりも見出しと馴染む */
.p-svc__arrow {
  flex: none;
  width: 3px; height: 1.1em;
  background: var(--c-primary);
  transition: height var(--duration) var(--ease);
}
.p-svc:hover .p-svc__arrow { height: 1.5em; }
.p-svc h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-base); line-height: var(--lh-xs); }
.p-svc p { font-size: var(--fs-m); line-height: var(--lh-s); margin-top: var(--sp-xs); }
.p-svc__meta {
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  color: var(--c-primary); margin-top: var(--sp-xs);
}
@media (max-width: 860px) { .p-svc-list { grid-template-columns: 1fr; gap: var(--sp-l); } }
@media (max-width: 420px) { .p-svc { grid-template-columns: 100px minmax(0, 1fr); gap: var(--sp-s); } }

/* ------------------------------------------------------------
   手順：4段階を横並びのカードで
   ------------------------------------------------------------ */
.p-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-s); }
.p-step {
  background: var(--c-bg-sub); border-radius: var(--radius-l);
  padding: var(--sp-m);
  display: grid; align-content: start; gap: var(--sp-2xs);
}
.p-step__no {
  font-family: var(--font-sub);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  letter-spacing: .1em; color: var(--c-primary);
}
.p-step h3 { font-size: var(--fs-l); font-weight: var(--fw-bold); color: var(--c-base); line-height: var(--lh-xs); }
.p-step p { font-size: var(--fs-m); line-height: var(--lh-s); }
/* 白地のセクションに置く場合は白カードに反転させる */
.l-section--sub .p-step { background: var(--c-white); }
@media (max-width: 900px) { .p-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .p-steps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   2枚並びの大きな入口カード（お立場別の案内）
   ------------------------------------------------------------ */
.p-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-l); }
.p-duo-card { display: block; }
.p-duo-card__photo { position: relative; border-radius: var(--radius-l); overflow: hidden; }
.p-duo-card__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.p-duo-card:hover .p-duo-card__photo img { transform: scale(1.05); }
.p-duo-card__tag {
  position: absolute; left: 0; top: var(--sp-s); z-index: 2;
  background: var(--c-primary-deep); color: var(--c-white);
  padding: var(--sp-xs) var(--sp-s);
  border-radius: 0 var(--radius-l) 0 0;
}
.p-duo-card:nth-child(2) .p-duo-card__tag { background: var(--c-primary); }
.p-duo-card__tag .ja { font-size: var(--fs-l); font-weight: var(--fw-bold); line-height: var(--lh-xs); }
.p-duo-card__tag .en { font-family: var(--font-sub); font-size: 11px; letter-spacing: .14em; color: var(--c-primary-pale); margin-top: .3em; }
.p-duo-card__body { padding-top: var(--sp-s); }
.p-duo-card__body p { font-size: var(--fs-m); line-height: var(--lh-s); }
.p-duo-card__body .c-link { margin-top: var(--sp-xs); font-size: var(--fs-s); }
@media (max-width: 767px) { .p-duo { grid-template-columns: 1fr; gap: var(--sp-m); } }

/* ------------------------------------------------------------
   信念・社是：濃紺の全幅バンドで、会社の芯として強く見せる
   ------------------------------------------------------------ */
.p-band,
.p-creed-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--c-primary-deep) 0%, #083a4c 55%, var(--c-primary-deep) 100%);
  color: var(--c-white);
  padding-block: var(--section);
}
/* 背景に薄く敷く格子。べた塗りの単調さを消す */
.p-band::before,
.p-creed-section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 0%, transparent 72%);
}
.p-band > *,
.p-creed-section > * { position: relative; z-index: 1; }

.p-creed-head { text-align: center; margin-bottom: var(--sp-xl); }
.p-creed-head .en {
  display: block;
  font-family: var(--font-sub);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  letter-spacing: .22em; color: var(--c-primary-pale);
}
.p-creed-head h2 {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--c-white); letter-spacing: normal;
  margin-top: var(--sp-2xs);
}
.p-creed-head p { font-size: var(--fs-m); color: var(--c-primary-pale); margin-top: var(--sp-xs); }

/* 信念：3項目を横並びのカードで */
.p-creed-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-m); }
.p-creed-item {
  background: rgba(255,255,255,.07);
  border-radius: var(--radius-l);
  padding: var(--sp-m);
  display: grid; align-content: start; gap: var(--sp-2xs);
}
.p-creed-no {
  font-family: var(--font-sub);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: var(--fw-bold); line-height: 1;
  color: rgba(255,255,255,.42);
}
.p-creed-item p {
  font-size: var(--fs-l); font-weight: var(--fw-bold);
  line-height: 1.75; color: var(--c-white);
}

/* 社是：大きく、句読点の切れ目で改行を固定する */
.p-creed-motto {
  text-align: center;
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-2xl);
  border-top: 1px solid rgba(255,255,255,.2);
}
/* 社是の見出し。英字ラベルを外して日本語の見出しにした */
.p-creed-motto-head {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--c-white); letter-spacing: normal;
  margin-bottom: var(--sp-s);
}
.p-creed-motto .en {
  display: block;
  font-family: var(--font-sub);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  letter-spacing: .22em; color: var(--c-primary-pale);
  margin-bottom: var(--sp-s);
}
.p-creed-motto-text {
  font-size: clamp(1.125rem, 1.95vw, 1.75rem);
  font-weight: var(--fw-bold);
  line-height: 2.05;
  letter-spacing: .02em;
}
@media (max-width: 900px) { .p-creed-list { grid-template-columns: 1fr; gap: var(--sp-s); } }

/* ============================================================
   フルページローダー（トップページのみ）
   紺地にロゴマークが浮かび、幕がめくれるようにページ全体を現す。
   JS無効時は display:none のままなので、幕がページを覆い続ける事故は起きない。
   ============================================================ */
.p-loader { display: none; }
.js .p-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--c-primary-deep);
  pointer-events: none;
  animation: loader-out .7s var(--ease) .95s both;
}
.js .p-loader__mark {
  width: clamp(180px, 24vw, 280px);
  height: auto;
  opacity: 0;
  /* 通常はカラーロゴだが、紺地の幕の上でも読めるよう白抜きにする */
  filter: brightness(0) invert(1);
  animation: loader-mark-in .55s var(--ease) .15s both;
}

/* ============================================================
   ページを開いた瞬間の動き
   ファーストビューはスクロールを待たずに動く必要があるため、
   IntersectionObserverではなくCSSアニメーションで即時に走らせる。
   ============================================================ */
@keyframes page-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes page-in-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes loader-mark-in {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes loader-out {
  0%   { transform: translateY(0); }
  99%  { visibility: visible; }
  100% { transform: translateY(-100%); visibility: hidden; }
}
@keyframes fv-photo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fv-photo-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* 下層ページの導入部：パンくず、英字、見出し、リードの順に出す */
.js .p-breadcrumb            { animation: page-in-fade .5s var(--ease) both; }
.js .p-page-header           { animation: page-in-fade .6s var(--ease) both; }
.js .p-page-header__eyebrow  { animation: page-in .7s var(--ease) .12s both; }
.js .p-page-header h1        { animation: page-in .7s var(--ease) .2s both; }
/* 英字も p 要素なので、除外しないとこの指定に上書きされて順番が入れ替わる */
.js .p-page-header p:not(.p-page-header__eyebrow) { animation: page-in .7s var(--ease) .3s both; }

/* トップのファーストビュー：写真は幕の裏で出し終えておき、幕が上がったら写真が見えている状態にする。
   幕が開き切ってから写真を出すと、その間だけ下地が見えてしまう（2026-09-23 修正）。
   寄りの動きは幕が上がる間も続くので、動きの演出は残る。コピーは従来どおり幕が開いてから出す */
.js .p-fv__visual img        { animation: fv-photo-fade .4s var(--ease) .5s both,
                                           fv-photo-zoom 1.8s var(--ease) .5s both; }
.js .p-fv__eyebrow           { animation: page-in .7s var(--ease) 1.65s both; }
.js .p-fv__title             { animation: page-in .8s var(--ease) 1.73s both; }
.js .p-fv__sub               { animation: page-in .8s var(--ease) 1.84s both; }
.js .p-fv__actions           { animation: page-in .8s var(--ease) 1.95s both; }
.js .p-fv__assurance         { animation: page-in .8s var(--ease) 2.05s both; }

/* ============================================================
   WORKLIST：企画実績の一覧（絞り込み＋グリッド）
   ・サムネイルとバッジはトップのカルーセル（.p-works__*）と共用する
   ・詳細ページを移設するまでカードはリンクにしない
   ============================================================ */
.p-worklist__filter {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2xs);
  margin-top: var(--sp-l);
}
.p-worklist__btn {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 44px;
  font-family: var(--font-main);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  line-height: 1; color: var(--c-base-deep);
  padding: .95em 1.7em;
  border: 0;
  border-radius: var(--radius-oval);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-base-pale);
  cursor: pointer;
  transition: background-color var(--duration), color var(--duration), box-shadow var(--duration);
}
.p-worklist__btn:hover {
  box-shadow: inset 0 0 0 1px var(--c-primary);
  color: var(--c-primary);
}
.p-worklist__btn[aria-pressed="true"] {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}
.p-worklist__btn-num { font-size: 12px; letter-spacing: .04em; opacity: .75; }

.p-worklist__count {
  text-align: center;
  font-size: var(--fs-s);
  color: var(--c-base-light);
  margin-top: var(--sp-s);
}

.p-worklist__grid {
  display: grid;
  /* minmax(0,1fr) にしないと、中の文字の幅ぶんだけ列が広がって
     狭い画面（320px）で横にはみ出す */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-m) var(--sp-s);
  margin-top: var(--sp-m);
}
.p-worklist__item[hidden] { display: none; }
/* カードはリンク。マウスを乗せたら写真が少し寄り、物件名がブランド色になる */
a.p-worklist__item { display: block; color: inherit; }
a.p-worklist__item:hover .p-works__thumb img { transform: scale(1.05); }
a.p-worklist__item .p-worklist__name { transition: color var(--duration); }
a.p-worklist__item:hover .p-worklist__name { color: var(--c-primary); }
.p-worklist__name {
  margin-top: var(--sp-2xs);
  font-size: var(--fs-m); font-weight: var(--fw-bold);
  line-height: var(--lh-s); color: var(--c-base);
}
.p-worklist__meta {
  font-family: var(--font-sub);
  font-size: var(--fs-s);
  color: var(--c-base-light);
  letter-spacing: .02em;
}
.p-worklist__note {
  margin-top: var(--sp-l);
  font-size: var(--fs-s); line-height: var(--lh-s);
  color: var(--c-base-light);
  text-align: center;
}
@media (max-width: 1024px) { .p-worklist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .p-worklist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .p-worklist__btn { padding: .85em 1.3em; } }

/* ============================================================
   WORKS DETAIL：企画実績の1棟ごとのページ
   ・左に写真、右に概要表。写真は縦長・横長が混ざるので切り取らず
     元の縦横比のまま出す（4:3で切ると縦長の6棟は上下が切れる）
   ・見出し・カード・ボタンは既存の部品をそのまま使い、
     このページ専用に作るのは並べ方と前後ナビだけにしてある
   ============================================================ */
.p-page-header__meta {
  margin-top: var(--sp-xs);
  font-size: var(--fs-m);
  letter-spacing: .06em;
  color: var(--c-primary-pale);
}

/* 見出しの中央寄せを解除する版。概要表の上でだけ使う */
.p-doc-head--left { text-align: left; margin-bottom: var(--sp-m); }

.p-work__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--sp-xl);
  align-items: start;
}
.p-work__photo {
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--c-bg-sub);
}
.p-work__photo img { display: block; width: 100%; height: auto; }
.p-work__note {
  margin-top: var(--sp-m);
  font-size: var(--fs-s); line-height: var(--lh-s);
  color: var(--c-base-light);
}

/* 同じ構造の他の実績は3列で出す（一覧ページは4列） */
.p-worklist__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------
   写真一覧（間取り図・内観・外観と共用部）
   ・サムネイルは押せるボタン。押すと大きく表示する（gallery.js）
   ・JSが動かなくてもサムネイルは見えるので、写真が消えることはない
   ------------------------------------------------------------ */
.p-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-m) var(--sp-s);
}
.p-gallery__item {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  font-family: var(--font-main);
  text-align: left; cursor: pointer;
}
.p-gallery__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-bg-sub);
}
.p-gallery__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.p-gallery__item:hover .p-gallery__thumb img,
.p-gallery__item:focus-visible .p-gallery__thumb img { transform: scale(1.05); }
.p-gallery__cap {
  display: block;
  margin-top: var(--sp-2xs);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  line-height: var(--lh-s); color: var(--c-base-deep);
}
.p-gallery__item:hover .p-gallery__cap { color: var(--c-primary); }

/* 間取り図は切り取らない。図面は端まで意味があるので全体を出す */
.p-plans { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-m); }
.p-plans .p-gallery__item { width: min(420px, 100%); }
.p-plans .p-gallery__thumb { aspect-ratio: auto; background: var(--c-white); }
.p-plans .p-gallery__thumb img { height: auto; object-fit: contain; }
.p-plans .p-gallery__cap { text-align: center; }

@media (max-width: 900px) { .p-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .p-gallery { grid-template-columns: repeat(2, 1fr); } }

/* 大きく表示する枠 */
.is-lightbox, .is-lightbox body { overflow: hidden; }
/* ヘッダー(100)やスマホ下部の固定ボタン(500)より必ず上に出す。
   暗い地は枠そのものに持たせる（子要素に持たせると重なり順で負けることがある） */
.p-lightbox {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: rgba(6, 38, 50, .94);
}
.p-lightbox[hidden] { display: none; }
/* 画像の外側を押したら閉じるための受け皿。見た目は持たせない */
.p-lightbox__backdrop { position: absolute; inset: 0; background: none; border: 0; }
.p-lightbox__panel {
  position: relative;
  display: grid; gap: var(--sp-s);
  width: min(1100px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--sp-l));
  grid-template-rows: minmax(0, 1fr) auto;
}
.p-lightbox__stage { display: grid; place-items: center; min-height: 0; }
.p-lightbox__stage img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-l);
  background: var(--c-white);
}
.p-lightbox__bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--sp-2xs) var(--sp-s);
  color: var(--c-white);
}
.p-lightbox__cap { font-size: var(--fs-m); font-weight: var(--fw-bold); }
.p-lightbox__cap[hidden] { display: none; }
.p-lightbox__num { font-size: var(--fs-s); opacity: .75; letter-spacing: .06em; }
.p-lightbox__nav { display: flex; gap: var(--sp-2xs); }
.p-lightbox__btn {
  font-family: var(--font-main);
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  color: var(--c-white);
  padding: .8em 1.5em;
  border: 0; border-radius: var(--radius-oval);
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background var(--duration);
}
.p-lightbox__btn:hover { background: rgba(255, 255, 255, .26); }
.p-lightbox__btn--close { background: var(--c-primary); }
.p-lightbox__btn--close:hover { background: var(--c-primary-deep); }
@media (max-width: 560px) {
  .p-lightbox__btn { padding: .8em 1.1em; }
  .p-lightbox__panel { max-height: calc(100dvh - 2 * var(--sp-m)); }
}

/* 前後の物件へ。左＝前、中央＝一覧、右＝次。
   端の物件は片側が空くので、空の枠を置いて中央がずれないようにしてある */
/* 下は問い合わせボタンの帯が続くので、ここでは下の余白を足さない */
.p-work__nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--sp-s);
  align-items: center;
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--c-base-very-pale);
  margin-top: var(--sp-2xl);
}
.p-work__nav-link {
  display: grid; gap: .2em;
  color: var(--c-base);
  transition: color var(--duration);
}
.p-work__nav-link:hover { color: var(--c-primary); }
.p-work__nav-link--next { text-align: right; justify-items: end; }
.p-work__nav-label { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .18em; color: var(--c-base-light); }
.p-work__nav-name {
  font-size: var(--fs-m); font-weight: var(--fw-bold); line-height: var(--lh-xs);
}
.p-work__nav-index {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-s); font-weight: var(--fw-bold);
  color: var(--c-base-deep);
  padding: .9em 1.8em;
  border-radius: var(--radius-oval);
  box-shadow: inset 0 0 0 1px var(--c-base-pale);
  transition: color var(--duration), box-shadow var(--duration);
}
.p-work__nav-index:hover { color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }

@media (max-width: 900px) {
  .p-work__inner { grid-template-columns: 1fr; gap: var(--sp-l); }
  .p-worklist__grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .p-worklist__grid--3 { grid-template-columns: repeat(2, 1fr); }
  /* スマホは1行に収まらないので、前後リンクを上下に分けて中央のボタンを下に置く */
  .p-work__nav-inner { grid-template-columns: 1fr 1fr; row-gap: var(--sp-m); }
  .p-work__nav-index { grid-column: 1 / -1; order: 3; }
}

/* ============================================================
   COLUMN：一覧の主役記事カードと、記事ページの体裁
   ・カテゴリの札は既存の .p-column__cat を共用する
   ・記事が増えたら2本目以降は既存の .p-column__list（3列）に並べる
   ============================================================ */
.p-featured {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-m);
  align-items: center;
  margin-top: var(--sp-2xl);
  background: var(--c-white);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: box-shadow var(--duration);
}
.p-featured:hover { box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.p-featured__thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.p-featured__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.p-featured:hover .p-featured__thumb img { transform: scale(1.05); }
.p-featured__body {
  display: grid; gap: var(--sp-xs); align-content: start;
  padding: var(--sp-m) var(--sp-m) var(--sp-m) 0;
}
.p-featured__head { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; }
.p-featured__title {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  line-height: var(--lh-xs); color: var(--c-base);
}
.p-featured__excerpt { font-size: var(--fs-m); line-height: var(--lh-s); color: var(--c-base-deep); }
@media (max-width: 820px) {
  .p-featured { grid-template-columns: 1fr; gap: var(--sp-s); }
  .p-featured__body { padding: 0 var(--sp-m) var(--sp-m); }
}

.p-article__meta {
  font-family: var(--font-sub);
  font-size: var(--fs-s); line-height: 1;
  color: var(--c-base-light); letter-spacing: .04em;
}
.p-doc-body > .p-article__meta { margin-bottom: var(--sp-s); }
.p-article__note {
  margin-top: var(--sp-l);
  font-size: var(--fs-s); line-height: var(--lh-s);
  color: var(--c-base-light);
}
.p-article__note--center { text-align: center; }

/* ============================================================
   スクロール連動アニメーション（1種類だけ）
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* 並んだ要素は、器ではなく中身を少しずつ遅らせて出す
   （器ごと動かすと一斉に出てしまい、動きが伝わらない） */
.js [data-reveal][data-stagger] { opacity: 1; transform: none; transition: none; }
.js [data-reveal][data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal][data-stagger].is-visible > * { opacity: 1; transform: none; }
.js [data-reveal][data-stagger].is-visible > *:nth-child(2) { transition-delay: .09s; }
.js [data-reveal][data-stagger].is-visible > *:nth-child(3) { transition-delay: .18s; }
.js [data-reveal][data-stagger].is-visible > *:nth-child(4) { transition-delay: .27s; }
.js [data-reveal][data-stagger].is-visible > *:nth-child(5) { transition-delay: .36s; }
.js [data-reveal][data-stagger].is-visible > *:nth-child(6) { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal][data-stagger] > * {
    opacity: 1 !important; transform: none !important;
    transition: none !important; transition-delay: 0s !important;
  }
  /* 読み込み時の動きも止める（アニメーション自体を打ち消す） */
  .js .p-breadcrumb, .js .p-page-header,
  .js .p-page-header__eyebrow, .js .p-page-header h1, .js .p-page-header p,
  .js .p-fv__visual img,
  .js .p-fv__eyebrow, .js .p-fv__title,
  .js .p-fv__sub, .js .p-fv__actions, .js .p-fv__assurance {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  /* フルページローダーは出さず、最初からページ全体を見せる */
  .js .p-loader { display: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   押せる範囲を最低44px角にする（見た目の大きさは変えない）
   デジタル庁デザインシステムの「ターゲット領域44px以上」に合わせた。
   文字が小さいリンクだけ、透明の当たり判定を上下左右に広げている
   ============================================================ */
.l-utility a,
.l-header__logo,
.l-header__tel a,
.p-breadcrumb a,
.l-footer__line a,
.l-footer__sns a,
.l-footer__copy a,
.p-line-announce a,
.p-contact-card__line a,
.c-link { position: relative; }
.l-utility a::after,
.l-header__logo::after,
.l-header__tel a::after,
.p-breadcrumb a::after,
.l-footer__line a::after,
.l-footer__sns a::after,
.l-footer__copy a::after,
.p-line-announce a::after,
.p-contact-card__line a::after,
.c-link::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* 下層ページの大見出しは、本文の見出し（.p-doc-h2）と同じ大きさにそろえる。
   トップだけは英字ラベルと組むので大きいまま */
body:has(.p-breadcrumb) .title-1__main { font-size: var(--fs-2xl); }

/* ============================================================
   文字の置き方をそろえる（2026-09-23 敵対レビューで直した）
   ・どのセクションも、文字はヘッダーと同じ枠の左端から書き始める
   ・長い文章は中央寄せにしない。中央に置くのは相談の案内・数字・信念など短いものだけ
   ============================================================ */
/* 本文用の細い列は、画面の中央に置く（2026-09-28 社長「A」。広い画面で右が大きく空くため。列の中の文字は左からそろえる） */
.l-inner--s { width: min(100% - var(--gutter) * 2, var(--w-large)); }
.l-inner--s > * { max-width: var(--w-small); margin-inline: auto; }
.p-jump { max-width: var(--w-small); margin-inline: auto; }
.l-inner--s .c-button-wrap { justify-content: flex-start; }


/* 中央寄せだったセクション頭・導入文・ページ見出しを左寄せにする */
.p-doc-head,
.p-claim,
.p-claim--left,
.p-page-header,
.p-band__lead,
.p-band__sub,
.p-band__note { text-align: left; }
.p-claim { max-width: none; margin-inline: 0; }
.p-page-header p,
.p-form { margin-inline: 0; }
.p-jump { justify-content: flex-start; }

/* 短いものだけ中央に残す。段落は幅を絞ったぶん中央に置き直す */
.p-cta-block .p-doc-head { text-align: center; }
.p-cta-block p,
.p-stats__head p,
.p-contact-card p,
.p-creed-section p,
.p-gate p,
.p-worklist__count,
.p-worklist__note { margin-inline: auto; }

/* ============================================================
   トップの段の釣り合い（2026-09-29 社長の書き込みで直した）
   ・管理実績：絵を外し、見出し・補足・項目名を大きくして数字との差を詰める。3列は本文の列の幅に収めて中央に置く
   ・事業内容・流れ：見出しとカードをひとまとまりにして、画面の中央に置く
   ・代表あいさつ：本文をほかの段と同じ大きさにそろえる
   ============================================================ */
.p-stats__head h2 { font-size: var(--fs-3xl); }
.p-stats__head p { font-size: var(--fs-l); margin-top: var(--sp-xs); }
.p-stats__list { max-width: var(--w-small); margin-inline: auto; grid-template-rows: auto auto auto; }
.p-stats__item { grid-row: span 3; }
.p-stats__label { font-size: var(--fs-l); word-break: keep-all; overflow-wrap: anywhere; }
/* ページの中の段は、どれも幅1240pxまでのまとまりにして画面の中央に置く（2026-09-29 社長「他の段も」。下層ページも同じ）。
   写真が画面の端まで出る段（Lifeについて・新築計画）は、文字の側の余白をこの幅に合わせる */
#management, #works, main .l-inner, main .l-inner--l {
  width: min(100% - var(--gutter) * 2, 1240px);
}
/* 本文の列の中の導入（.p-claim）も、ほかの段落と同じ幅で中央に置く */
.l-inner--s > .p-claim { max-width: var(--w-small); margin-inline: auto; }
@media (min-width: 1025px) {
  .p-about__body { padding-left: max(var(--gutter), (100vw - 1240px) / 2); }
  .p-about__inner--rev .p-about__body { padding-left: 0; padding-right: max(var(--gutter), (100vw - 1240px) / 2); }
}
.p-message__text { font-size: var(--fs-l); }
@media (max-width: 820px) {
  .p-stats__label { font-size: 13px; }
}

/* 見出し・ボタン・項目名は言葉の途中で改行しない。切れ目の <wbr> は tools/build.py が文節ごとに入れる */
h1, h2, h3, h4, .c-button, [class*="__label"], [class*="title"]:not([class*="-wrap"]) { word-break: keep-all; overflow-wrap: anywhere; }
/* 管理画面で書く記事の題名・見出しは <wbr> が入らないので、対応するブラウザ（Chrome・Edge）で文節の切れ目を自動で探させる */
@supports (word-break: auto-phrase) {
  .single-post .p-page-header h1, .p-article__body h2, .p-article__body h3,
  .p-featured__title, .p-column__title { word-break: auto-phrase; }
}