@charset "UTF-8";

/* =========================================================
   variables
   ========================================================= */
:root {
  --font-base: "Gen Interface JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-logo: "Outfit", var(--font-base);

  --c-navy: #2c537e;
  --c-navy-strong: #2a62a1;
  --c-ink: #27272a;
  --c-gray: #666666;
  --c-gray-light: #acabaf;
  --c-line: #e2e2e2;
  --c-beige: #f7f6f2;
  --c-beige-deep: #f7f7f5;
  --c-blue-pale: #eef2f7;
  --c-blue-pale2: #f2f4fb;
  --c-blue-pale3: #edf2f9;
  --c-blue-pale4: #f4f8fb;
  --c-gray-pale: #ecece8;
  --c-green: #2ea36a;
  --c-green-pale: #eaf7f0;
  --c-orange: #fe9000;
  --c-favorite: #ff335c;
  --c-error: #d13c3c;
  --c-line-brand: #06c755;

  --side: 20px;
}

/* =========================================================
   base
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--font-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

img {
  border: none;
  vertical-align: bottom;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

/* ブラウザ標準のフォーカスリング（青枠）を出さない */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus {
  outline: none;
}

/* =========================================================
   layout
   ========================================================= */
.l-page {
  max-width: 430px;
  margin-inline: auto;
  overflow: hidden;
}

/* 東京・大阪タブ：選択中のエリアと一致しない要素を隠す */
.l-page[data-active-area="tokyo"] [data-area="osaka"],
.l-page[data-active-area="osaka"] [data-area="tokyo"] {
  display: none;
}

/* ---- header ---- */
.l-header {
  position: fixed;
  top: 4px;
  right: 4px;
  left: 4px;
  z-index: 3;
  max-width: calc(430px - 4px * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.l-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.l-header__mark {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 2px;
}

.l-header__mark img {
  position: absolute;
  top: -15%;
  left: -14.09%;
  width: 129.09%;
  height: 129.09%;
  max-width: none;
  object-fit: cover;
}

.l-header__name {
  font-family: var(--font-logo);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 3.24px;
  color: var(--c-navy);
}

/* ---- footer ---- */
.l-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 64px 0 88px;
  background: var(--c-beige);
}

.l-footer__logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.l-footer__mark {
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 2px;
}

.l-footer__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-footer__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.l-footer__name-en {
  margin-right: -5.76px;
  font-family: var(--font-logo);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 5.76px;
  color: var(--c-navy);
}

.l-footer__divider {
  display: block;
  width: 150px;
  height: 1px;
}

.l-footer__name-ja {
  margin-right: -4.48px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 4.48px;
  color: var(--c-navy);
}

.l-footer__sns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.l-footer__sns-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.l-footer__sns-text {
  margin-right: -1.44px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1.44px;
  color: var(--c-navy);
}

.l-footer__about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding-inline: var(--side);
}

.l-footer__desc {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.12px;
  text-align: center;
  color: var(--c-gray);
}

/* リンクは6本あり、スマホ幅では1行に収まらない。折り返さないと左右にはみ出して
   「エリア・駅からさがす」「プライバシーポリシー」が画面の外で押せなかった（2026-10-17 修正） */
.l-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.l-footer__link {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  white-space: nowrap;
  color: var(--c-gray);
}

/* 事業者情報。免許番号は広告に表示する項目なので、フッターのある2ページには
   ここに置く。物件詳細2ページはフッターが無いので c-company が担当する（5-12） */
.l-footer__company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding-inline: var(--side);
}

/* 商号。免許の名義（株式会社PERVA）にサービス名を併記している。
   4箇所（物件詳細2ページの c-company__name とフッター2ページ）で表記を揃えること。
   色は下の行と同じグレー。太さだけで他の行と差をつけている
   （物件詳細の c-company__name はネイビーのままで、フッターとは色が違う） */
.l-footer__company-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.12px;
  text-align: center;
  color: var(--c-gray);
}

/* 所在地と免許番号 */
.l-footer__company-row {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  text-align: center;
  color: var(--c-gray);
}

.l-footer__copy {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .96px;
  text-align: center;
  color: var(--c-gray);
}

/* =========================================================
   components
   ========================================================= */

/* ---- ライブドット（ソナー波紋） ---- */
/* リアルタイムで確認中であることを示す、脈を打つグリーンドット */
.c-live__dot,
.c-badge__dot {
  position: relative;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-green);
}

.c-live__dot::after,
.c-badge__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 線ではなく塗りで広がるのがソナーの質感 */
  border-radius: 50%;
  background: var(--c-green);
  animation: sonar 2s cubic-bezier(.2, .5, .4, 1) infinite;
}

@keyframes sonar {
  0% {
    opacity: .4;
    transform: scale(1);
  }

  70% {
    opacity: 0;
    transform: scale(3.6);
  }

  /* 70〜100%は休符。余韻の間 */
  100% {
    opacity: 0;
    transform: scale(3.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-live__dot::after,
  .c-badge__dot::after {
    animation: none;
  }
}

/* ---- 稼働中バッジ（ヘッダー） ---- */
.c-live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  /* 波紋がバッジの外へはみ出さないよう角丸で切り抜く */
  overflow: hidden;
  border-radius: 40px;
  background: var(--c-green-pale);
}

.c-live__text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12px;
  white-space: nowrap;
  color: var(--c-green);
}

/* ---- ステータスバッジ ---- */
.c-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  /* 波紋がバッジの外へはみ出さないよう角丸で切り抜く */
  overflow: hidden;
  border-radius: 40px;
}

/* display: inline-flex を指定しているので、hidden を効かせるにはこの1行が要る
   （検索結果の件数横に「全て募集中」を戻したとき、0件で隠せるように残してある。README 7-6参照） */
.c-badge[hidden] {
  display: none;
}

.c-badge--green {
  background: var(--c-green-pale);
}

.c-badge__text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12px;
  white-space: nowrap;
  color: var(--c-green);
}

.c-badge--tight .c-badge__text {
  line-height: 1.2;
}

/* 募集が終わった物件のバッジ。ドットは付けない（確認が続いていないため） */
.c-badge--muted {
  background: var(--c-gray-pale);
}

.c-badge--muted .c-badge__text {
  color: var(--c-gray);
}

/* ---- タブ（お気に入りの表示切替） ---- */
.c-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-tab {
  padding: 8px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-beige);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .13px;
  white-space: nowrap;
  color: var(--c-gray);
}

.c-tab[aria-selected="true"] {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}

/* ---- タグ ---- */
.c-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 16px;
  background: var(--c-beige);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .13px;
  white-space: nowrap;
  color: var(--c-gray);
}

.c-tag--outline {
  border: 1px solid var(--c-line);
  background: #fff;
}

/* ---- 見出し ---- */
.c-sechead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-sechead--inset {
  padding-left: var(--side);
}

/* 白カードの中に置く見出し。本文が灰色なので、見出しはネイビーで受ける */
.c-sechead--navy .c-sechead__ja {
  color: var(--c-navy);
}

.c-sechead__en {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .96px;
  color: var(--c-navy);
}

.c-sechead__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.c-sechead__ja {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.6px;
  color: var(--c-ink);
}

.c-sechead__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* ---- ページ見出し（下層ページの h1 とリード文） ---- */
.c-pagehead {
  margin-top: 20px;
}

.c-pagehead__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.92px;
  color: var(--c-ink);
}

.c-pagehead__lead {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 1.04px;
  color: var(--c-gray);
}

/* ---- カテゴリーチップ ---- */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: var(--c-blue-pale2);
}

.c-chip__icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.c-chip__icon img {
  position: absolute;
  top: 0;
  left: 1.25px;
  max-width: none;
}

.c-chip__icon--building img { top: 1.25px; width: 18.167px; height: 17.334px; }
.c-chip__icon--designers img { top: 1.25px; width: 18.167px; height: 16.917px; }
.c-chip__icon--pet img { top: 0; left: 0; width: 20px; height: 20px; }
.c-chip__icon--renovation img { top: 0; left: 0; width: 20px; height: 20px; }
.c-chip__icon--railway img { top: 1.25px; left: 4.25px; width: 12.334px; height: 18.167px; }
.c-chip__icon--couple img { top: 0; left: 0; width: 20px; height: 20px; }
.c-chip__icon--tokyo img { top: 0; left: 0; width: 20px; height: 20px; }
.c-chip__icon--osaka img { top: 0; left: 0; width: 20px; height: 20px; }

.c-chip__text {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .13px;
  white-space: nowrap;
  color: var(--c-navy);
}

/* ---- 物件カード（縦） ---- */
.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 278px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 8px 8px 0 0 rgba(204, 204, 204, .24);
}

.c-card__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.c-card__media {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 185px;
  overflow: hidden;
  background: #d9d9d9;
}

.c-card__img {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
}

.c-card__img--p01 { top: 0; left: -4.51%; width: 112.44%; height: 100%; }
.c-card__img--p02 { top: -1.56%; left: -4.4%; width: 105.48%; height: 105.88%; }
/* 幅がページに追従するカードは、切り抜きの座標を決め打ちできないので object-fit にまかせる */
.c-card__img--cover { top: 0; left: 0; width: 100%; height: 100%; }

/* 検索結果の一覧に並べるカード。中身はTOPの横スクロールと同じで、
   幅いっぱい・角丸なし・影なしにする */
.c-card--wide {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* 一覧では金額から見るので、カード共通の16pxより大きくする。
   320pxでも本文幅は272px（288px − 左右8px×2）あり、
   「118,000円 / 管理費5,000円」は20pxで238pxなので1行に収まる */
.c-card--wide .c-card__price {
  font-size: 20px;
}

/* 写真の素材は3:2（1000×667）なので、枠も3:2にして上下を切らない。
   TOPの縦カード（278×185＝1.503）と同じ見え方になる。
   高さ185px固定のままだと、幅がページに追従するぶん枠だけが横長になり、
   430pxでは枠2.108に対して素材の上下が28.8%切れていた（README 3-1参照）。
   枠の高さは幅なりに伸びる（375pxで223px・430pxで260px） */
.c-card--wide .c-card__media {
  height: auto;
  aspect-ratio: 3 / 2;
}

.c-card__tag {
  position: absolute;
  top: 10px;
  left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 2px rgba(204, 204, 204, .4);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .96px;
  white-space: nowrap;
  color: var(--c-gray);
}

/* 新着タグ。全ページ共通で、定義は「掲載開始から3日以内」。
   WordPress移行時は掲載日から判定し、3日を過ぎたらこのタグを出力しない。
   移行担当者が別の日数に変える場合はその判断に従う
   （参考：SUUMOは1週間以内。このサイトは「AI確認 8分前」の鮮度に合わせて短くしている） */
.c-card__tag--new {
  color: var(--c-orange);
}

.c-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  line-height: 0;
}

/* =========================================================
   指の当たりを44pxまで広げる（見た目は変えない）
   ---------------------------------------------------------
   アイコンだけのボタンは、デザインの寸法どおりだと24〜32pxしかなく、
   目安の44px（Appleのガイドライン）に足りない。
   透明な領域を中央に重ねて当たりだけ広げる。要素の大きさは変えないので、
   隣との間隔もアイコンの位置も動かない。

   width/height を 100% にしてから min- で44pxまで持ち上げているのは、
   44px 決め打ちにすると「もともと44pxより広い要素」を逆に狭めてしまうため。
   ========================================================= */
.c-card__fav::before,
.l-header__back::before,
.p-detail__nav::before,
.p-detail__map::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
}

/* カードのハートだけ、当たりを2px内側へずらす。
   .c-card が角丸のため overflow: hidden で、ハートの外側は上下左右8pxしかない。
   中央に置くと10px必要で、はみ出した2pxが切られて42pxになる。
   ずらすのは当たりだけなので、アイコンの位置は動かない */
.c-card__fav::before {
  top: calc(50% + 2px);
  left: calc(50% - 2px);
}

/* 横カードは本文側に24pxの余地がない（320pxでステータス行が既に一杯）ため、
   縦カードと同じく画像の右上に重ねる。カードの padding 10px と画像120pxから逆算 */
.c-card__fav--row {
  top: calc(10px + 8px);
  right: auto;
  left: calc(10px + 120px - 8px - 24px);
}

/* 固定CTAバーのお気に入り。カードに重ねず、独立したボタンとして置く。
   丸56pxはデザイン（Figma 888:4833）の通り。カード上のハート（角丸の四角）とは別物 */
.c-card__fav--cta {
  /* relative 必須：当たり拡張の ::before(absolute) の基準をこの丸ボタンに限定する。
     static だと ::before が固定CTAバー全体に広がり、隣のLINEボタンを透明に覆って
     「LINEを押すとお気に入りが反応する」不具合になる */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
}

/* ハートだけはカードより一回り大きい（デザインでは56pxの枠に対して22px）。
   24pxの図形を28pxで描くので、線の太さは実寸2pxになるよう割り戻している
   （2 × 24 ÷ 28 ÷ .98[= .c-card__fav-icon の scale] ≒ 1.75） */
.c-card__fav--cta .c-card__fav-icon {
  width: 28px;
  height: 28px;
  stroke: var(--c-favorite);
  stroke-width: 1.75;
}

/* 線と塗りをCSSで切り替えるため、ハートはインラインSVGで置いている。
   白ハート（stroke:#fff）は明るい物件写真に埋もれるため、影で常に輪郭が見えるようにする。 */
.c-card__fav-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

/* お気に入り登録中：線も塗りも同色にして、塗り潰したハートにする */
.c-card__fav[aria-pressed="true"] .c-card__fav-icon {
  fill: var(--c-favorite);
  stroke: var(--c-favorite);
}

.c-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 16px;
}

.c-card__state {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-card__checked {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12px;
  white-space: nowrap;
  color: var(--c-gray);
}

.c-card__price {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16px;
  color: var(--c-ink);
}

.c-card__meta {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12px;
  color: var(--c-gray);
}

/* ---- 敷・礼・仲 ---- */
.c-fee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.c-fee__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.c-fee__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  background: var(--c-line);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12px;
  color: var(--c-gray);
}

.c-fee__val {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12px;
  white-space: nowrap;
  color: var(--c-gray);
}

/* ---- 物件カード（横） ---- */
.c-rowcard {
  position: relative;
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: #fff;
}

.c-rowcard__link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.c-rowcard__media {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 8px;
  background: #d9d9d9;
}

.c-rowcard__img {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
}

.c-rowcard__img--cover { top: 0; left: 0; width: 100%; height: 100%; }
.c-rowcard__img--p02 { top: 0; left: -36.57%; width: 149.7%; height: 100%; }

.c-rowcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

/* ---- エリア／条件タイル ---- */
.c-tile {
  flex-shrink: 0;
  width: 136px;
}

.c-tile--fluid {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.c-tile__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-tile__media {
  position: relative;
  display: block;
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 8px;
  background: #d9d9d9;
}

/* 専用写真の無い駅タイル（実在庫から自動生成した駅）用の背景。エリア別に色分けし、
   駅名は中央寄せで大きく見せる（実写タイルと並んでも意図的な意匠に見えるように）。 */
.c-tile__media--plain {
  background: linear-gradient(135deg, #3f3f5a 0%, #5b6b8c 55%, #7c8bad 100%);
}
.c-tile__media--plain[data-area="tokyo"] {
  background: linear-gradient(135deg, #2f3a5c 0%, #47588a 55%, #6c82b4 100%);
}
.c-tile__media--plain[data-area="osaka"] {
  background: linear-gradient(135deg, #5c3630 0%, #8a5346 55%, #b47f6c 100%);
}

/* 写真なしタイルの中身（エリア小ラベル＋駅名を中央に積む） */
.c-tile__plainbody {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}
.c-tile__plainlabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .78);
}
.c-tile__plainname {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .3px;
  color: #fff;
}

.c-tile__img {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
}

.c-tile__img--cover { top: 0; left: 0; width: 100%; height: 100%; }
.c-tile__img--dog { top: -55.29%; left: -98.17%; width: 249.18%; height: 170.23%; }

.c-tile__shade {
  position: absolute;
  top: 88px;
  right: 0;
  left: 0;
  height: 72px;
  background: linear-gradient(180deg, rgba(134, 134, 144, 0) 0%, #27272a 100%);
}

.c-tile__name {
  position: absolute;
  top: 131px;
  left: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .15px;
  white-space: nowrap;
  color: #fff;
}

.c-tile__count {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12px;
  color: var(--c-gray);
}

/* ---- ボタン ---- */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border: 1px solid transparent;
  border-radius: 40px;
  transition: transform .1s ease, filter .1s ease;
}

/* タップハイライトを全体で消しているので、押した手応えはここで返す */
.c-btn:active {
  transform: scale(.98);
  filter: brightness(.94);
}

@media (prefers-reduced-motion: reduce) {
  .c-btn {
    transition: none;
  }

  .c-btn:active {
    transform: none;
  }
}

.c-btn--line {
  border-color: var(--c-line-brand);
  background: var(--c-line-brand);
}

.c-btn--tel {
  border-color: var(--c-navy);
  background: var(--c-navy);
}

.c-btn--submit {
  width: 100%;
  border-color: var(--c-navy);
  background: var(--c-navy);
}

/* 検索結果へ進むボタン。「募集中」の緑で件数と一緒に示す */
.c-btn--result {
  width: 100%;
  border-radius: 8px;
  border-color: var(--c-green);
  background: var(--c-green);
}

/* 0件のときは押せない見た目にする（disabled はJSが付ける＝updateFinderSubmit）。
   条件を変える手はページ内に残っているので、出口はふさがっていない。
   色は選択パネルの「決定」（.c-panel__done:disabled）と揃えている */
.c-btn--result:disabled {
  border-color: var(--c-line);
  background: var(--c-line);
  color: var(--c-gray-light);
}

/* 件数は条件を変えるたびに桁数が変わる。字幅を揃えて5文字ぶんの幅を
   先に確保しておき、数字が変わってもボタンの文字が動かないようにする
   （掲載件数は東京4,530・大阪2,920なので「9,999」の5文字で足りる） */
.c-btn--result [data-result-count] {
  display: inline-block;
  min-width: 5ch;
  font-variant-numeric: tabular-nums;
}

/* 検索結果の「もっと見る」。一覧の続きなので、進むボタンより弱い白地＋枠にする */
.c-btn--more {
  width: 100%;
  border-radius: 8px;
  border-color: var(--c-navy);
  background: #fff;
}

.c-btn--more .c-btn__text {
  color: var(--c-navy);
}

/* 固定バーの中に置くボタン。残り幅いっぱいに伸ばす */
.c-btn--bar {
  flex: 1 1 0;
  min-width: 0;
  gap: 4px;
  padding: 16px 8px;
  border-radius: 32px;
}

.c-btn--bar .c-btn__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .14px;
}

.c-btn__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.c-btn__text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  white-space: nowrap;
  color: #fff;
}

/* ---- チェックボックス ----
   標準の四角は消して、Figmaから書き出したSVG（オフ=白／オン=緑）に差し替える */
/* 高さ40pxは .p-finder__select（枠1px込みで40.4px）に合わせた値。
   家賃・専有面積のセレクトと縦に並んだときに揃う */
.c-check {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 4px;
  background: var(--c-blue-pale4);
}

.c-check__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: url(../images/icons/checkbox-off.svg) no-repeat center / 20px 20px;
}

/* チェック済みはネイビー。緑は「募集中」と「先へ進む」に絞っているので、
   選択を示す色は他の is-selected と同じネイビーに揃える。
   緑版の checkbox-on.svg は差し戻せるように残してある */
.c-check__box:checked {
  background-image: url(../images/icons/checkbox-on-navy.svg);
}

/* 「TVモニタ付きインタホン」のように2行になるラベルがあるため行間を持たせる。
   1行のときの高さはチェックボックス20pxが決めるので、見た目は変わらない */
.c-check__label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .14px;
  color: var(--c-ink);
}

/* 募集中の件数。名称のすぐ右に続けて出す（駅・市区）。
   数字はWordPressが data-listed-count に出力する値で、
   静的デモに入っているのは仮の値 */
.c-check__count {
  margin-left: 4px;
  font-size: 12px;
  letter-spacing: .12px;
  color: var(--c-gray);
}

/* 募集中が0件のときは、名称ごと文字を薄くして選ぶ前に分かるようにする。
   選択そのものは止めていない（0件でも押せる） */
.c-check:has(.c-check__count[data-listed-count="0"]) .c-check__label {
  opacity: .4;
}

/* お問い合わせフォームの同意チェック。すぐ上の説明文（.p-form__privacy）と
   地続きに見せるため、背景を絞り込みの淡い青ではなくベージュに合わせている */
.c-check--consent {
  background: var(--c-beige);
}

/* 未チェックのまま送信したとき。四角の線が赤くなるのはこのエラー時だけで、
   タップ・フォーカスでは色を変えない（.p-form__input.is-invalid と同じ方針）。
   オフの四角（14px角・線1.5px）と同じ形で、線の色だけ --c-error にしたもの */
.c-check__box.is-invalid {
  background-image: url(../images/icons/checkbox-off-error.svg);
}

/* ---- アコーディオン ---- */
.c-acc {
  padding: 16px var(--side);
  border-top: 1px solid var(--c-line);
}

.c-acc__head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.c-acc__head::-webkit-details-marker {
  display: none;
}

.c-acc__title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-ink);
}

.c-acc__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform .2s ease;
}

.c-acc[open] .c-acc__arrow {
  transform: rotate(180deg);
}

.c-acc__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.c-acc__tags:empty {
  display: none;
}

/* ---- トースト ----
   短い通知をクイックナビの上に出す。文言はJSが入れる（showToast）。
   下の84pxは クイックナビの逃げ8 ＋ 実測68 ＋ 間隔8。
   display で消すと aria-live が読み上げないので、透明にして置いておく */
.c-toast {
  position: fixed;
  right: var(--side);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  left: var(--side);
  z-index: 30;
  max-width: calc(430px - var(--side) * 2);
  margin-inline: auto;
  padding: 12px 16px;
  border-radius: 4px;
  background: var(--c-navy);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .14px;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.c-toast.is-shown {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .c-toast {
    transition: none;
  }
}

/* ---- 横スクロール ---- */
.p-category__scroller,
.p-pickup__scroller,
.p-area__scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.p-category__scroller::-webkit-scrollbar,
.p-pickup__scroller::-webkit-scrollbar,
.p-area__scroller::-webkit-scrollbar {
  display: none;
}

/* ---- 路線・駅（物件詳細） ---- */
.c-route {
  display: flex;
  flex-direction: column;
}

.c-route__item {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .13px;
  white-space: nowrap;
}

.c-route__line,
.c-route__walk {
  color: var(--c-gray);
}

.c-route__station {
  font-weight: 700;
  color: var(--c-ink);
}

/* ---- おすすめポイント ---- */
.c-pickbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--c-beige);
}

.c-pickbox__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .14px;
  color: var(--c-ink);
}

.c-pickbox__list {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .14px;
  color: var(--c-gray);
}

/* ---- 定義リスト（物件概要） ---- */
.c-deflist__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 8px;
  border-top: 1px solid var(--c-blue-pale3);
}

.c-deflist__key,
.c-deflist__val {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .13px;
}

.c-deflist__key {
  color: var(--c-navy);
}

.c-deflist__val {
  color: var(--c-ink);
}

/* ---- 取扱不動産会社（物件詳細） ----
   広告に表示する事業者情報。物件詳細2ページにはフッターが無いため、
   ここが商号・所在地・免許番号の唯一の置き場所になっている */
.c-company {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 8px;
  background: var(--c-blue-pale4);
}

.c-company__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14px;
  color: var(--c-navy);
}

/* 所在地と免許番号 */
.c-company__row {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-gray);
}

/* ---- 初期費用の明細（開閉できる） ---- */
.c-cost {
  overflow: hidden;
  border: 1px solid var(--c-beige);
  border-radius: 8px;
}

.c-cost__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--c-beige);
  cursor: pointer;
  list-style: none;
}

.c-cost__head::-webkit-details-marker {
  display: none;
}

.c-cost__head-label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13px;
  color: var(--c-ink);
}

.c-cost__total {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2px;
  white-space: nowrap;
  color: var(--c-navy);
}

.c-cost__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform .2s ease;
}

.c-cost[open] .c-cost__arrow {
  transform: rotate(180deg);
}

.c-cost__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-top: 1px solid var(--c-beige);
  background: #fff;
}

.c-cost__key {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-gray);
}

.c-cost__val {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  text-align: right;
  color: var(--c-ink);
}

.c-cost__note {
  padding: 10px 8px;
  border-top: 1px solid var(--c-beige);
  background: #fff;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-navy);
}

/* =========================================================
   project
   ========================================================= */

/* ---- hero ---- */
.p-hero {
  position: relative;
  height: 438px;
  overflow: hidden;
}

.p-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.p-hero__bg-img {
  position: absolute;
  top: -9.28%;
  left: -83.91%;
  width: 206.95%;
  height: 118.35%;
  max-width: none;
  object-fit: cover;
}

.p-hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(44, 83, 126, .14);
}

.p-hero__illust {
  position: absolute;
  top: 114px;
  right: var(--side);
  width: 121px;
  height: 184px;
}

/* 上からではなく下から位置を決める。検索ボックスはMVに -80px 食い込むので、
   上からの指定だと行数が増えた分だけ下へ伸びて、その白いカードに隠れてしまう。
   下端を88pxに固定すると、リード文が何行になってもカードとのすき間は
   438 - 88 - 80 = 8px のまま保たれ、コピーは上へ伸びる */
.p-hero__copy {
  position: absolute;
  bottom: 88px;
  right: var(--side);
  left: var(--side);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-hero__title {
  display: flex;
  flex-direction: column;
}

.p-hero__line {
  position: relative;
  display: block;
}

.p-hero__line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  height: 35px;
  border-radius: 4px;
  background: var(--c-navy-strong);
  transform: translateY(-50%);
}

.p-hero__line--01::before { width: 162px; }
.p-hero__line--02::before { width: 246px; }

.p-hero__line-text {
  position: relative;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.92px;
  color: #fff;
}

.p-hero__lead {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .96px;
  color: #fff;
}

/* ---- 検索ボックス ---- */
.p-search {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -80px var(--side) 0;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 16px rgba(44, 83, 126, .32);
}

.p-search__pref {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 4px;
  background: var(--c-beige);
}

.p-search__pref-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 16px;
  border-radius: 4px;
  background: var(--c-beige);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--c-gray-light);
}

.p-search__pref-btn.is-current {
  background: #fff;
  box-shadow: 0 0 2px rgba(204, 204, 204, .64);
  font-weight: 700;
  color: var(--c-navy);
}

.p-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  background: var(--c-beige);
}

.p-search__field-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* 文字16pxはiOSのフォーカス時の自動ズーム回避も兼ねる */
.p-search__field-input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--c-ink);
}

.p-search__field-input::placeholder {
  color: var(--c-gray-light);
  opacity: 1;
}

.p-search__field-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.p-search__field-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--c-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .13px;
  white-space: nowrap;
}

/* 人気の検索タグ。表示個数は固定せず、2行に収まる分だけ見せる
   （c-tag の高さ = 文字13px + padding 8px×2 + border 1px×2 = 31px） */
.p-search__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-height: calc(31px * 2 + 8px);
  overflow: hidden;
}

/* 在庫が少ないタグ・3行目にあふれたタグはJSが hidden を付ける */
.p-search__tags [hidden] {
  display: none;
}

/* ---- クイックナビ（デバイスの画面下に固定） ---- */
.p-quicknav {
  position: fixed;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  left: 8px;
  z-index: 10;
  max-width: calc(430px - 8px * 2);
  margin-inline: auto;
  padding: 8px;
  border: 1px solid #fff;
  border-radius: 40px;
  background: rgba(226, 226, 226, .5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.p-quicknav__list {
  display: flex;
  gap: 8px;
}

.p-quicknav__item {
  flex: 1 1 0;
  min-width: 0;
}

.p-quicknav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
}

.p-quicknav__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.p-quicknav__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .12px;
  text-align: center;
  color: var(--c-gray);
}

.p-quicknav__link.is-current .p-quicknav__label {
  color: var(--c-navy);
}

/* ---- 稼働状況パネル ---- */
.p-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 45px var(--side) 0;
  padding: 24px 16px;
  border-radius: 16px;
  background: var(--c-blue-pale);
}

.p-status__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-status__head-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.p-status__head-icon img {
  position: absolute;
  top: 1.64px;
  left: 2.47px;
  width: 19.885px;
  height: 19.885px;
  max-width: none;
}

.p-status__head-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.2px;
  color: var(--c-navy);
}

.p-status__stats {
  display: flex;
  gap: 2px;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.p-status__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  background: #fff;
}

.p-status__stat-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12px;
  color: var(--c-gray);
}

.p-status__stat-value {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.p-status__stat-value--update {
  align-items: center;
  gap: 8px;
}

.p-status__stat-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .2px;
  white-space: nowrap;
  color: var(--c-navy);
}

.p-status__stat-unit {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12px;
  color: var(--c-gray);
}

.p-status__flow {
  width: 100%;
}

/* .p-status の gap 8px に 8px 足して、差し替え前の画像と同じ16px空ける */
.p-status__note {
  width: 100%;
  margin-top: 8px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-gray);
}

/* ---- 稼働状況パネルのAI確認フロー ----
   線が左から満ちていき、着いたノードのアイコンが点灯して波紋が広がる。
   1周6.4秒で、1.6秒ごとに次のノードへ進む。 */
.p-status__flow-svg {
  display: block;
  width: 100%;
  height: auto;
  /* 波紋は2.1倍（半径37.8）まで広がる。左右は viewBox に収まるが、
     cy 35 に対して上下は2.8ずつ出るため、切らずに見せる。
     はみ出す分はパネルの余白16pxの内側なので、角丸からは出ない */
  overflow: visible;
}

/* テンポはここだけが持つ。順番を変えるときは --step の付け替えで足りる */
.p-status__flow-step {
  --step: 0;
}

.p-status__flow-step--2 {
  --step: 1;
}

.p-status__flow-step--3 {
  --step: 2;
}

.p-status__flow-step--4 {
  --step: 3;
}

/* 背景の破線。まだ確認していない区間 */
.p-status__flow-track {
  stroke: rgba(44, 83, 126, .3);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* 満ちていく実線。全長260（x:40→300）を dashoffset で出し入れする。
   x はノードの cx と同じ値なので、cx を動かしたらここも直す */
.p-status__flow-fill {
  stroke: var(--c-navy);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 260;
  animation: flow-fill 6.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes flow-fill {
  0% {
    stroke-dashoffset: 260;
    opacity: 1;
  }

  6% {
    stroke-dashoffset: 260;
  }

  76% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  94% {
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 260;
    opacity: 0;
  }
}

.p-status__flow-node {
  fill: #fff;
  stroke: rgba(44, 83, 126, .22);
  stroke-width: 1;
}

/* 波紋。ヘッダーの稼働中バッジと同じで、線ではなく塗りで広がる。
   白いノードの下に置いてあるので、輪郭は隠れて外側だけが見える */
.p-status__flow-ring {
  fill: var(--c-navy);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: flow-sonar 6.4s cubic-bezier(.2, .5, .4, 1) infinite;
  animation-delay: calc(var(--step) * 1.6s);
}

@keyframes flow-sonar {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  6% {
    opacity: .3;
    transform: scale(1);
  }

  30% {
    opacity: 0;
    transform: scale(2.1);
  }

  /* 30〜100%は休符。次の周回まで出さない */
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

/* 着いたら点灯し、周回の終わりまで灯ったまま。線の蓄積と同じ動き */
.p-status__flow-icon {
  opacity: .5;
  transform-box: fill-box;
  transform-origin: center;
  animation: flow-lit 6.4s ease infinite;
  animation-delay: calc(var(--step) * 1.6s);
}

@keyframes flow-lit {
  0% {
    opacity: .5;
  }

  6% {
    opacity: 1;
    transform: scale(1.1);
  }

  12% {
    transform: scale(1);
  }

  72% {
    opacity: 1;
  }

  86% {
    opacity: .5;
  }

  100% {
    opacity: .5;
  }
}

/* ラベルはSVGの外のテキスト。拡大しても字だけ大きくなる */
.p-status__flow-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}

/* 同じパネルの .p-status__stat-label と同じ12px。375px未満だけ10pxに落とす（後述） */
.p-status__flow-labels li {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .02em;
  text-align: center;
  color: var(--c-ink);
}

/* 動きに酔いやすい環境では止める。線は満ちた状態、アイコンは全点灯で見せる */
@media (prefers-reduced-motion: reduce) {
  .p-status__flow-fill {
    animation: none;
    stroke-dashoffset: 0;
  }

  .p-status__flow-ring {
    animation: none;
  }

  .p-status__flow-icon {
    animation: none;
    opacity: 1;
  }
}

/* ---- カテゴリー ---- */
.p-category {
  margin-top: 56px;
}

.p-category__scroller {
  margin-top: 16px;
  padding-inline: var(--side);
}

.p-category__chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: max-content;
}

.p-category__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- ピックアップ ---- */
.p-pickup {
  margin-top: 56px;
  padding: 40px 0;
  background: var(--c-beige-deep);
}

.p-pickup__scroller {
  margin-top: 24px;
  padding-inline: var(--side);
  /* overflow-x: auto は overflow-y も auto に計算されるため、
     カードの影（下方向8px）が切れる。その分の逃げをとる */
  padding-bottom: 8px;
}

.p-pickup__list {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
}

/* ---- 人気エリア ---- */
.p-area {
  padding: 48px 0 24px;
}

.p-area__scroller {
  margin-top: 24px;
  padding-inline: 10px;
}

.p-area__list {
  display: flex;
  gap: 8px;
  width: max-content;
}

/* 在庫が少ないエリアはJSが hidden を付ける */
.p-area__list [hidden] {
  display: none;
}

/* ---- 物件リスト（デザイナーズ／リノベーション） ---- */
.p-list {
  padding: 24px var(--side);
}

.p-list__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

/* ---- ペットと暮らす ---- */
.p-pet {
  padding: 24px var(--side);
}

.p-pet__list {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

/* ---- CTA ---- */
.p-cta {
  margin-top: 48px;
  padding: 20px 10px;
  background: var(--c-navy);
}

.p-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
}

.p-cta__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-cta__en {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .96px;
  color: var(--c-navy);
}

.p-cta__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.92px;
  color: var(--c-navy);
}

.p-cta__lead {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-gray);
}

.p-cta__steps {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  background: var(--c-blue-pale3);
}

.p-cta__step {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.12px;
  color: var(--c-navy);
}

.p-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-cta__note {
  text-align: center;
}

.p-cta__note-link {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.04px;
  text-decoration: underline;
  text-underline-position: from-font;
  color: var(--c-gray);
}

/* ---- 駅・路線・エリアから探す ---- */
.p-browse {
  margin-top: 48px;
  background: #fff;
}

/* 検索結果では、一覧のすぐ下に続くので上の余白を詰める */
.p-browse--result {
  margin-top: 40px;
}

/* =========================================================
   物件詳細
   ========================================================= */
/* ヘッダーとCTAバーが固定なので、その分の逃げを上下にとる
   （上: ヘッダー 4+48+4 / 下: CTAバー実測117 ＋ 余白27） */
.l-page--detail {
  padding-top: 56px;
  /* 詳細は下部メニューを置かず固定CTA(約150px)のみ。CTA実高さ＋隙間ぶんを空ける */
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}

/* 検索は下部メニュー(高さ84px)を置くため、固定バーはメニューの上に 8px の隙間を空けて載せる（92px）。
   詳細はメニューを置かないため p-detailcta は基底の bottom:0 のまま（画面最下部に固定） */
.l-page--search .p-finder__foot {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.l-header__back {
  display: block;
  flex-shrink: 0;
  /* 当たりを広げる ::before の基準にする（位置は動かない） */
  position: relative;
  width: 32px;
  height: 32px;
  line-height: 0;
}

.p-detail__name {
  padding-inline: var(--side);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2px;
  color: var(--c-ink);
}

/* ---- 写真スライダー ---- */
.p-detail__gallery {
  position: relative;
  margin-top: 4px;
}

.p-detail__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.p-detail__track::-webkit-scrollbar {
  display: none;
}

.p-detail__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 281px;
  background: #d9d9d9;
}

.p-detail__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 間取り図は切り抜かずに全体を収める（components/DetailGallery.astro・2026-10-15〜） */
.p-detail__slide--plan {
  background: #fff;
}

.p-detail__slide--plan img {
  object-fit: contain;
}

.p-detail__counter {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  padding: 4px 8px 3px;
  border-radius: 16px;
  background: rgba(44, 83, 126, .9);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .13px;
  color: #fff;
}

.p-detail__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 32px;
  height: 32px;
  line-height: 0;
  transform: translateY(-50%);
}

.p-detail__nav--prev {
  left: 10px;
}

.p-detail__nav--next {
  right: 10px;
}

.p-detail__nav img {
  width: 32px;
  height: 32px;
}

/* 端まで来たら押せないことを見た目でも伝える */
.p-detail__nav:disabled {
  opacity: .3;
}

/* ---- サマリー ---- */
.p-detail__summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-inline: var(--side);
}

.p-detail__price-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-detail__price {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2px;
  color: var(--c-ink);
}

/* ---- 動画・初期費用・シェア・お気に入り数 ---- */
.p-detail__actions {
  display: flex;
  gap: 8px;
  margin: 24px var(--side) 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--c-blue-pale4);
}

.p-detail__action {
  flex: 1 1 0;
  min-width: 0;
}

/* 動画が無い物件では、動画のアクションを出さない。
   href が空（または未出力）のリンクを持つ項目を列ごと消し、残りが均等に広がる。
   シェアは button、お気に入り数は p なので a に限定して誤爆を防ぐ */
.p-detail__action:has(> a.p-detail__action-link:not([href])),
.p-detail__action:has(> a.p-detail__action-link[href=""]) {
  display: none;
}

.p-detail__action-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

/* お気に入りアクションは data-slug の JS フックのため .c-card__fav を付けるが、
   同クラスはカード用の絶対配置（写真右上に重ねる 24px）を持つ。詳細アクション行では
   それを打ち消し、他アクションと同じ縦積みセルとして並べる（＝列が空にならない・件数が見える）。
   ⚠ static にしてはいけない。♡の「指の当たり」（.c-card__fav::before・絶対配置）が遠くの親を基準に広がり、
   上にある「空き状況／初期費用を確認する」・パンくず・シェアを覆って、押すと♡が付くだけになっていた
   （2026-10-16 #364 から 10-17 まで）。relative でこのセルの中に収める。見張りは lib/detail-hit-area.test.ts */
.p-detail__action .c-card__fav {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  height: auto;
  line-height: inherit;
}

.p-detail__action-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.p-detail__action-label {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12px;
  text-align: center;
  color: var(--c-navy);
}

/* ---- 先行受付の告知（先行受付ページのみ） ---- */
.p-detail__notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px var(--side) 0;
  padding: 8px;
  border-radius: 4px;
  background: var(--c-blue-pale4);
}

.p-detail__notice-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.p-detail__notice-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.p-detail__notice-date {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .13px;
  color: var(--c-navy);
}

.p-detail__notice-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .13px;
  color: var(--c-gray);
}

/* 区切り線は下の要素が持つ。上7pxは親のgap、下7pxはこのpaddingで作る */
.p-detail__notice-about {
  padding-top: 7px;
  border-top: 1px solid var(--c-line);
}

.p-detail__notice-term {
  font-weight: 600;
  color: var(--c-navy);
}

/* ---- 本文 ---- */
.p-detail__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 24px;
  padding-inline: var(--side);
}

.p-detail__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-detail__section--tight {
  gap: 8px;
}

/* 物件概要の下の注記。1つめは「更新日」と「AI確認」の役割の違いの説明、
   2つめは掲載内容の扱い。地の文と混ざらないよう、囲って字を落としている */
.p-detail__datanote {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 8px;
  background: var(--c-beige);
}

.p-detail__datanote-text {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-gray);
}

.p-detail__address {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-detail__address-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .14px;
  color: var(--c-gray);
}

.p-detail__map {
  display: inline-flex;
  align-items: center;
  /* 同上 */
  position: relative;
  flex-shrink: 0;
}

.p-detail__map-text {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .13px;
  color: var(--c-navy);
}

/* アイコン24pxの枠の中央に12pxのピンが入る想定の余白 */
.p-detail__map-icon {
  flex-shrink: 0;
  width: 12px;
  height: 17px;
  margin-inline: 6px;
}

/* 段落間はデザインの空行1行分（14px × 1.6）に合わせる */
.p-detail__lead {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .14px;
  color: var(--c-gray);
}

.p-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 設備。タグ型にすると「似た条件でさがす」の押せるタグと見分けがつかないため、
   ／で連ねた文章にして事実の列挙だと分かるようにする。
   読む文字なので大きさ・行間は本文（p-detail__lead）に合わせ、
   紹介文と区別するために色だけ ink にしている */
.p-detail__spec {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .14px;
  color: var(--c-ink);
  /* 設備名の途中で改行させず、区切りの空白だけで折り返す。
     1項目が1行に収まらない場合だけ anywhere で逃がす */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---- 固定CTA（お気に入り＋LINE相談） ---- */
.p-detailcta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 430px;
  margin-inline: auto;
  padding: 16px var(--side) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line);
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.p-detailcta__note {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .13px;
  text-align: center;
  color: var(--c-ink);
}

.p-detailcta__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* =========================================================
   お問い合わせフォーム
   ========================================================= */
/* ヘッダーが固定、下部にクイックナビが固定なのでその分の逃げをとる
   （上: ヘッダー 4+48+4 / 下: クイックナビ実測68 ＋ 余白44） */
.l-page--form {
  padding-top: 56px;
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

.p-form {
  padding-inline: var(--side);
}

.p-form__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 24px;
}

.p-form__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* エラー時にスクロールで戻したとき、固定ヘッダーの下に潜らないための逃げ */
  scroll-margin-top: 72px;
}

.p-form__labelrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-form__label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.28px;
  color: var(--c-navy);
}

.p-form__badge {
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .12px;
}

.p-form__badge--required {
  background: var(--c-blue-pale);
  color: var(--c-navy);
}

.p-form__badge--optional {
  background: var(--c-line);
  color: var(--c-gray);
}

/* iOSの標準装飾（角丸・内影）を消す。文字16pxはフォーカス時の自動ズーム回避も兼ねる */
.p-form__input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .16px;
  color: var(--c-ink);
  -webkit-appearance: none;
  appearance: none;
}

.p-form__input::placeholder {
  color: rgba(39, 39, 42, .3);
}

.p-form__input--area {
  height: 140px;
  resize: vertical;
}

/* 未入力・形式エラー。枠線の色が変わるのはこのエラー時だけ
   （タップ・入力中は枠の色を変えない） */
.p-form__input.is-invalid {
  border-color: var(--c-error);
}

.p-form__error {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 1.04px;
  color: var(--c-error);
}

.p-form__note {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 1.04px;
  color: var(--c-gray);
}

.p-form__privacy {
  padding: 8px;
  border-radius: 4px;
  background: var(--c-beige);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--c-gray-light);
}

.p-form__privacy-link {
  color: var(--c-navy);
  text-decoration: underline;
}

/* =========================================================
   お部屋をさがす（条件検索）
   ========================================================= */
/* ヘッダーが固定、下部にクイックナビが固定なのでその分の逃げをとる
   （上: ヘッダー 4+48+4 / 下: クイックナビ実測68 ＋ 余白44） */
/* このページにクイックナビは無い。下の逃げは固定した「この条件で○件を見る」の
   ぶん（上下padding16+16 ＋ 上の枠線1 ＋ ボタン50.8 ＝ 83.8 → 84px）。
   選択パネルのフッター（--panel-foot）と同じ値になっている */
.l-page--search {
  padding-top: 56px;
  /* 下部メニュー(84px)＋「この条件で○件を見る」バー(84px)＋隙間 の二段ぶんを空ける */
  padding-bottom: calc(176px + env(safe-area-inset-bottom, 0px));
}

/* ---- 画面下に固定する「この条件で○件を見る」 ---- */
/* 条件を選ぶたびに件数が動くので、どこまでスクロールしても見えている必要がある。
   見た目は物件詳細の固定CTA（.p-detailcta）と同じ＝サイト内で固定帯は1種類。
   選択パネル（.c-panel）は z-index: 20 なので、開くとこの帯を覆う */
.p-finder__foot {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  max-width: 430px;
  margin-inline: auto;
  padding: 16px var(--side) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line);
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.p-finder {
  padding-inline: var(--side);
}


.p-finder__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.p-finder__cond {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.p-finder__groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-finder__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-finder__group-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.2px;
  color: var(--c-navy);
}

/* 見出しのすぐ下の断り書き（「設備の情報がある物件の中から絞ります」など）。
   件数の数字（.c-check__count）と同じ大きさ・色にそろえ、条件の文字より目立たせない */
.p-finder__group-note {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .12px;
  color: var(--c-gray);
}

/* 家賃の下限〜上限 */
.p-finder__range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-finder__range-sep {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 1.12px;
  color: var(--c-gray);
}

/* iOSの標準装飾を消し、矢印はSVGで置く。文字16pxはフォーカス時の自動ズーム回避 */
.p-finder__select {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 32px 8px 8px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: #fff url(../images/icons/chevron-down.svg) no-repeat right 8px center / 20px 20px;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .16px;
  /* 「下限なし・上限なし」のままの間は薄く見せる（切り替えはJS） */
  color: rgba(39, 39, 42, .3);
}

/* 下限〜上限の組ではなく単独で置くセレクト（築年数・駅徒歩）。
   .p-finder__group は縦並びのflexなので、flexの伸縮を切って全幅にする */
.p-finder__select--single {
  flex: 0 0 auto;
  width: 100%;
}

.p-finder__select.is-selected {
  color: var(--c-ink);
}

/* チェックボックスの2列並び */
.p-finder__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ---- さがし方（エリアタブ／路線・駅／エリア／キーワード） ---- */
/* デザイン上この4つはひとかたまり。間隔8pxで縦に積む */
.p-finder__ways {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-finder__way-row {
  display: flex;
  gap: 8px;
}

/* 未選択はプレースホルダ色。1つ以上選ぶと is-selected でネイビーになる。
   アイコンは currentColor なので文字色に追従する（インラインSVGにした理由） */
.p-finder__way {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 4px;
  background: var(--c-beige);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--c-gray-light);
}

.p-finder__way.is-selected {
  color: var(--c-navy);
}

.p-finder__way-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.p-finder__way-icon svg {
  display: block;
}

.p-finder__way-label {
  white-space: nowrap;
}

/* 選んだ路線・駅／エリアの名称。複数選ぶと「、」でつながって長くなるので、
   1行に収めてあふれた分を … で省略する。
   親の .p-finder__way に min-width: 0 があるので幅が確定し、省略が効く */
.p-finder__way-picked {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 未選択のときは gap の4pxも出したくないので、要素ごと消す */
.p-finder__way-picked:empty {
  display: none;
}

/* ---- 選択パネル（路線・駅／エリア） ---- */
.c-panel {
  /* フッターの高さ。上下padding16+16 ＋ 上の枠線1 ＋ ボタン50.8 ＝ 83.8。
     本文の下の逃げと同じ値を使うので変数にしている（safe-areaは各所で別に足す） */
  --panel-foot: 84px;

  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin-inline: auto;
  background: #fff;
}

.c-panel[hidden] {
  display: none;
}

.c-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px var(--side);
  border-bottom: 1px solid var(--c-line);
}

.c-panel__back {
  display: flex;
  flex-shrink: 0;
}

.c-panel__title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.44px;
  color: var(--c-ink);
}

/* 本文だけがスクロールする。ヘッダーとフッターは動かさない。
   下の逃げはフッターの高さ分。これが無いと最後の項目がフッターに隠れる */
.c-panel__body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px var(--side) calc(24px + var(--panel-foot) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 本文の上に重ねる。こうしないと裏に何も無いので、
   半透明の白と blur が「不透明な白」と見分けが付かなくなる */
.c-panel__foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 16px var(--side) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line);
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.c-panel__reset,
.c-panel__done {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .14px;
}

/* 幅は4:6。デザイン（375pxでリセット131.5 / 決定195.5）の比率を、
   画面幅が変わっても保つための指定。
   flex-grow で分ける方法だと padding+border の18pxが上乗せされて
   比率がずれるため、flex-basis を割合で与えて縮ませている */
.c-panel__reset {
  flex: 0 1 40%;
  border: 1px solid var(--c-gray-light);
  background: var(--c-gray-light);
  color: #fff;
}

.c-panel__done {
  flex: 0 1 60%;
  border: 1px solid var(--c-green);
  background: var(--c-green);
  color: #fff;
}

/* まだ何も選んでいない間は押せない見た目にする（disabled はJSが付ける）。
   閉じたいだけの人は左上の←で戻れるので、出口はふさがっていない */
.c-panel__done:disabled {
  border-color: var(--c-line);
  background: var(--c-line);
  color: var(--c-gray-light);
}

/* パネルを開いている間は背面を動かさない */
body.is-panel-open {
  overflow: hidden;
}

/* ---- 路線・駅パネルの中身（事業者 → 路線 → 駅の3階層） ---- */
/* 駅が全部で2,277件あるので、路線ごとに details で畳んでおく。
   開閉はブラウザ標準の details 機能で、JSは使っていない
   （JSが見るのは「すべて」と選択数だけ） */
.p-finder__lines {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-finder__lines-group {
  display: flex;
  flex-direction: column;
}

.p-finder__lines-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.2px;
  color: var(--c-navy);
}

.p-finder__lines-list {
  margin-top: 8px;
  border-top: 1px solid var(--c-line);
}

.p-finder__line {
  border-bottom: 1px solid var(--c-line);
}

.p-finder__line-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  cursor: pointer;
  list-style: none;
}

.p-finder__line-head::-webkit-details-marker {
  display: none;
}

.p-finder__line-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .14px;
  color: var(--c-ink);
}

/* 選択がある路線は畳んでいても分かるようにする */
.p-finder__line.is-selected .p-finder__line-name {
  font-weight: 600;
  color: var(--c-navy);
}

/* 路線の募集中件数。駅と違って単位まで出す（例 195件） */
.p-finder__line-listed {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .13px;
  color: var(--c-gray);
}

.p-finder__line-count:not(:empty) {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13px;
  color: var(--c-navy);
}

/* 0件の路線も駅と同じく薄くする */
.p-finder__line-head:has(.p-finder__line-listed[data-listed-count="0"]) .p-finder__line-name,
.p-finder__line-head:has(.p-finder__line-listed[data-listed-count="0"]) .p-finder__line-listed {
  opacity: .4;
}

.p-finder__line-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.p-finder__line[open] .p-finder__line-arrow {
  transform: rotate(180deg);
}

.p-finder__line-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}

.p-finder__line-all .c-check__label {
  font-weight: 600;
  color: var(--c-navy);
}

/* ---- エリアパネルの中身（市区のグループ） ---- */
/* 件数が少ないので初期状態は開いておく（HTMLの open）。
   畳めるようにしているのは、23区だけ見たい人が市部を閉じられるようにするため */
.p-finder__cities-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 12px 8px;
  cursor: pointer;
  list-style: none;
}

.p-finder__cities-head::-webkit-details-marker {
  display: none;
}

.p-finder__cities-title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.2px;
  color: var(--c-navy);
}

.p-finder__cities-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.p-finder__cities[open] .p-finder__cities-arrow {
  transform: rotate(180deg);
}

/* ---- 追加の項目（畳んでおく） ---- */
/* 項目数が多いので閉じた状態を初期値にする。開閉はブラウザ標準の
   details 機能で、JSは使っていない（TOPの c-acc と同じ考え方） */
.p-finder__more {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.p-finder__more-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
}

.p-finder__more-head::-webkit-details-marker {
  display: none;
}

.p-finder__more-title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.2px;
  color: var(--c-navy);
}

.p-finder__more-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.p-finder__more[open] .p-finder__more-arrow {
  transform: rotate(180deg);
}

.p-finder__more-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 16px;
}

/* =========================================================
   検索結果
   ========================================================= */
/* ヘッダーが固定なので上に逃げをとる（4+48+4）。
   下はフッターの padding-bottom 88px がクイックナビ（8+68+8）を避けている */
.l-page--result {
  padding-top: 56px;
}

.p-result {
  padding-inline: var(--side);
}

/* ---- ヒット件数 ---- */
/* 横に並ぶ相手（「全て募集中」バッジ）が無くなったので、flexは持たせていない。
   上の余白は他ページの見出し（.c-pagehead）の20pxより詰めて12px。件数の数字を
   32pxにしたぶん行の上に半行（6.4px）入るので、20pxのままだと空いて見えるため。
   ヘッダーの逃げ（.l-page--result の padding-top 56px）は全ページ共通なので触らない */
.p-result__head {
  margin-top: 12px;
}

.p-result__count {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.92px;
  white-space: nowrap;
  color: var(--c-ink);
}

/* 数字だけさらに大きくする。「件」24px・「見つかりました。」15pxと同じ
   ベースラインに乗る。お部屋をさがす側の「この条件で○件を見る」も同じ
   [data-result-count] なので、この見出しの中だけに限定する */
.p-result__count [data-result-count] {
  font-size: 32px;
}

/* 「見つかりました。」は件数より一段小さくして、数字を主役に残す。
   15pxは帯（.p-result__tool-text）と同じサイズ。数字32pxを含めてこの行は219pxで、
   4桁の1,234件でも241px。320pxで使える288pxに収まるので字間はそのまま */
.p-result__count-suffix {
  margin-left: 2px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.2px;
}

/* ---- 検索条件の要約 ---- */
.p-result__cond {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 1.04px;
  color: var(--c-gray);
}

.p-result__cond-title {
  font-weight: 500;
}

/* 条件が増えても2行にせず、1行のまま末尾を…で省く */
.p-result__cond-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 並び替え・条件保存・条件変更 ---- */
/* 上下の8pxは列（.p-result__tool）が持つ。帯側に持たせると、その8pxが
   列の外＝押しても何も起きない場所になり、指の当たりが文字1行分（18.2px）
   しか無くなるため。帯の高さは34.2pxで変わらない */
.p-result__tools {
  display: flex;
  align-items: center;
  margin-top: 16px;
  padding-inline: 8px;
  border-radius: 4px;
  background: var(--c-blue-pale4);
}

.p-result__tool {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-block: 8px;
}

/* 並び替えは選んだ項目名がそのまま入るが、列は3等分のまま広げない。
   収まらない項目名（320pxの「賃料の安い順」など）は末尾を…で省く。
   列幅が項目名で動くと、右2列の押せる範囲まで変わってしまうため */
.p-result__tool--sort {
  position: relative;
}

.p-result__tool--sort .p-result__tool-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* セレクトは列全体に透明で重ねる。見えている文字は .p-result__tool-text が
   受け持つので、iOSのフォーカス時の自動ズームを避ける16pxにしても、
   帯の見た目は15pxのまま保てる（320px以下は13px） */
.p-result__sort {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

.p-result__tool-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1.04px;
  white-space: nowrap;
  color: var(--c-navy);
}

/* すでに保存した条件のとき。押せないことが分かるよう薄くする */
.p-result__tool:disabled .p-result__tool-text {
  color: var(--c-gray-light);
}

.p-result__tool:disabled .p-result__tool-icon {
  opacity: .4;
}

.p-result__tool-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ---- 一覧 ---- */
.p-result__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

/* ページ送りで隠したカード。.c-card{display:flex} が UA の [hidden] を打ち消すため、
   属性セレクタで display:none を明示する（app.js のページングが hidden 属性で出し入れする） */
.c-card[hidden] {
  display: none;
}

/* ---- ページ送り ---- */
.p-result__more {
  margin-top: 24px;
}

/* ---- 区・駅のページ（p-landing・components/LandingBody.astro） ----
   検索結果と同じ枠（.p-result）に、TOPの数字の並び（.p-status__stats）と
   物件詳細の内部リンク集（.p-tagdir）を組み合わせる。足すのは間隔だけ */
.p-landing__stats {
  margin-top: 16px;
}

.p-landing__text {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .14px;
  color: var(--c-ink);
}

.p-landing__list {
  margin-top: 32px;
}

/* 下のリンク集（ベージュの帯）との間を空ける。帯はフッターの直前に置く */
.p-landing__links {
  margin-top: 40px;
}

/* 23区と駅の一覧（/areas.html）。見出しの下のタグ群と、路線ごとの段 */
.p-landing__tags {
  margin-top: 16px;
}

.p-landing__line {
  margin-top: 20px;
}

/* ---- 0件のときの案内 ---- */
/* カードが1枚も無いときは ul ごと隠す。置いたままだと高さ0でも margin-top 24px
   だけが残り、下の案内の余白と足されて空きすぎるため。
   display: flex を指定しているので、hidden を効かせるにはこの1行が要る */
.p-result__list[hidden] {
  display: none;
}

/* display を指定すると hidden が効かなくなるので指定しない（お気に入りと同じ） */
.p-result__empty {
  margin-top: 24px;
  padding-block: 24px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  text-align: center;
  color: var(--c-gray);
}

/* ---- 条件をゆるめてさがしたお部屋（0件のときだけ出る） ---- */
/* 0件と言った直後にカードが並ぶので、「見つかりませんでした」とは別のかたまり
   だと分かるよう、見出しと説明文で区切ってから並べる。
   .p-result の中に置いているので、左右の余白は var(--side) を受け継ぐ。
   ここも display は指定しない（hidden で隠すため） */
.p-similar {
  margin-top: 8px;
}

/* 何をゆるめた結果なのかを1文で伝える。移行時はゆるめた段に合わせて書き換える */
.p-similar__note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 1.04px;
  color: var(--c-gray);
}

/* カードの間隔は検索結果の一覧（.p-result__list）と同じ16px */
.p-similar__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

/* =========================================================
   LINE相談
   ========================================================= */
/* ヘッダーが固定、下部にクイックナビが固定なのでその分の逃げをとる
   （上: ヘッダー 4+48+4 / 下: クイックナビ実測68 ＋ 余白44） */
.l-page--line {
  padding-top: 56px;
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

.p-line {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline: var(--side);
}

/* 相談のきっかけ別のカード（CASE 01 / CASE 02） */
.p-line__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 12px rgba(44, 83, 126, .08);
}

.p-line__text,
.p-line__hours {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-gray);
}

.p-line__hours {
  text-align: center;
}

.p-line__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-line__note {
  text-align: center;
}

.p-line__note-link {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.04px;
  text-decoration: underline;
  text-underline-position: from-font;
  color: var(--c-gray);
}

/* ---- LINEで送る3つの質問 ---- */
/* 角丸の内側で行の区切り線を切るため、枠側で切り抜く */
.p-line__qa {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  /* お気に入りのCTAから #qa で飛んでくるので、固定ヘッダー（56px）の
     下に潜らないための逃げ。お問い合わせフォームと同じ値 */
  scroll-margin-top: 72px;
}

.p-line__qa-head {
  padding: 10px 8px;
  background: var(--c-beige);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-gray);
}

/* 区切り線は下の行が持つ（見出し行との境目も同じ1本で作る） */
.p-line__qa-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-top: 1px solid var(--c-line);
  background: #fff;
}

/* セレクトは行全体に透明で重ねる。見えている文字は .p-line__qa-answer が受け持つので、
   iOSのフォーカス時の自動ズームを避ける16pxにしても、行の見た目は14pxのまま保てる */
.p-line__qa-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

/* 質問と答えを半分ずつに割り、3行の答えの開始位置を揃える */
.p-line__qa-key,
.p-line__qa-val {
  flex: 1 1 0;
  min-width: 0;
}

.p-line__qa-key {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-gray);
}

.p-line__qa-val {
  display: flex;
  align-items: center;
  gap: 4px;
}

.p-line__qa-answer {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-ink);
}

/* 未選択の「選択してください」。本文と同じ濃さだと選び終えたように見えるため薄くする */
.p-line__qa-answer.is-empty {
  color: rgba(39, 39, 42, .3);
}

.p-line__qa-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* =========================================================
   1枚もののお知らせページ（thanks.html / 404.html）
   - 見出し・本文・イラストだけの同じ組み方をするページで共用する
   ========================================================= */
.l-page--message {
  padding-top: 156px;
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

.p-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-inline: var(--side);
}

.p-message__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.p-message__title {
  font-family: var(--font-base);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 2.56px;
  text-align: center;
  color: var(--c-navy);
}

.p-message__lead {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--c-gray);
}

/* 高さは揃っているが、幅はイラストごとに違う */
.p-message__illust {
  display: block;
  height: 151px;
}

.p-message__illust--thanks {
  width: 240px;
}

.p-message__illust--404 {
  width: 196px;
}

/* =========================================================
   お気に入り
   ========================================================= */
/* 下の逃げはページ側で作らない。最後のブロックがCTA（ネイビー）なので、
   白い余白が挟まらないようCTA自身がクイックナビ分の余白を持つ */
.l-page--favorite {
  padding-top: 56px;

  /* 固定のクイックナビに最後の要素が潜らないための逃げ。
     ふだんはCTAが持つが、CTAを隠したときは .p-fav が持つので、
     両方が同じ値を使えるよう1か所にまとめている */
  --fav-nav-clear: calc(88px + env(safe-area-inset-bottom, 0px));
}

.p-fav {
  padding-inline: var(--side);
}

/* 見出し・タブ（パネルを切り替えても動かない部分） */
.p-fav__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-fav__panels {
  margin-top: 16px;
}

.p-fav__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* display の指定が hidden より強いので、選ばれていないパネルを明示的に隠す */
.p-fav__panel[hidden] {
  display: none;
}

.p-fav__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 0件のときはJSが一覧を隠す。display の指定が hidden より強いので明示的に消す */
.p-fav__list[hidden],
.p-cond__list[hidden] {
  display: none;
}

/* 0件のときの案内。display を指定すると hidden が効かなくなるので指定しない */
.p-fav__empty {
  padding-block: 24px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  text-align: center;
  color: var(--c-gray);
}

/* ---- AIが確認中であることの案内 ---- */
.p-fav__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: var(--c-blue-pale);
}

/* 0件のときはJSが隠す。display の指定が hidden より強いので明示的に消す */
.p-fav__notice[hidden] {
  display: none;
}

/* 20pxの枠の中に16.82pxのピンを置く（書き出した実寸のまま使う） */
.p-fav__notice-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.p-fav__notice-icon img {
  position: absolute;
  top: 1.24px;
  left: 1.93px;
  width: 16.82px;
  height: 16.82px;
  max-width: none;
}

.p-fav__notice-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 1.12px;
  color: var(--c-navy);
}

/* 320pxではバッジとAI確認が1行に並びきらず、.c-badge の overflow: hidden で
   バッジの文字が黙って切れる。2行に折り返して切れないようにする */
.p-fav .c-card__state {
  flex-wrap: wrap;
}

/* ---- 物件カード（横）の見た目：お気に入りページ版 ---- */
/* このページのカードは、枠線・角丸・外側の余白を持たず、画像がカードの端に
   接する。余白はすべて本文側（.c-rowcard__body の padding）で持つ。
   TOP（index.html）の横カードは枠付きのままなので、.p-fav の中だけに限定する */
.p-fav .c-rowcard {
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* 画像と本文の間に隙間を作らない（本文の padding が隙間の役割をする） */
.p-fav .c-rowcard__link {
  gap: 0;
}

.p-fav .c-rowcard__media {
  border-radius: 0;
}

.p-fav .c-rowcard__body {
  gap: 4px;
  padding: 8px;
}

/* 募集終了のカードだけ、本文の行間が8px */
.p-fav .c-rowcard--ended .c-rowcard__body {
  gap: 8px;
}

/* カードの padding 10px が無くなった分、ハートの位置も詰める。
   画像120pxの右上に8pxの余白を取って重ねる */
.p-fav .c-card__fav--row {
  top: 8px;
  left: calc(120px - 8px - 24px);
}

/* ---- 募集が終わった物件のカード ---- */
.c-rowcard--ended {
  background: var(--c-line);
}

.p-fav__ended-note {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12px;
  color: var(--c-gray);
}

.p-fav__ended-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* 「似た物件を見る」はリンク、「リストから削除」「削除」はその場で消すボタン。
   役割は違うが、デザイン上は同じ見た目の文字リンクとして揃える */
.p-fav__ended-link,
.p-cond__remove {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12px;
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
  color: var(--c-navy);
}

/* ---- 募集終了が3件以上のときの1行表示 ---- */
/* 中に入るカードがグレー（c-rowcard--ended）なので、外枠は白のままにする。
   同じグレーで重ねると、開いたときにカードの境目が消える */
.p-fav__folded {
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: #fff;
}

.p-fav__folded-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.p-fav__folded-head::-webkit-details-marker {
  display: none;
}

.p-fav__folded-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform .2s ease;
}

.p-fav__folded[open] .p-fav__folded-arrow {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .p-fav__folded-arrow {
    transition: none;
  }
}

.p-fav__folded-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.p-fav__folded-list:empty {
  display: none;
}

/* ---- 保存した条件 ---- */
.p-cond__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-cond__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: #fff;
}

/* 1段目。ここが検索結果へのリンク */
.p-cond__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 条件の文は「駅：〜、家賃：〜、間取り：〜」と長くなるため、2行まで見せて
   あふれた分だけ末尾を…で省く（1行だと駅名だけで埋まってしまう） */
.p-cond__text {
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 1.12px;
  color: var(--c-ink);
}

.p-cond__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* 2段目。件数と削除。1段目に置くと要約の幅が238pxまで削られるため下段に分けている */
/* 中身は「削除」ボタンだけ。右端にそろえて、上の行の矢印と縦線を合わせる
   （以前は左に「募集中○件」のバッジを置いて space-between にしていた） */
.p-cond__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* 上限に達したときだけ出す。display を指定すると hidden が効かなくなるので指定しない */
.p-cond__note {
  padding: 8px;
  border-radius: 16px;
  background: var(--c-blue-pale);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 1.04px;
  color: var(--c-navy);
}

/* ---- CTA（お気に入り用） ---- */
/* 見出しが2行に収まるよう、TOPのCTAより2px小さくしている（デザイン指定） */
.p-cta__title--sm {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1.76px;
}

/* クイックナビ（実測68px）が白いカードに重ならないよう、下だけ余白を足す */
.p-cta--fav {
  padding-bottom: var(--fav-nav-clear);
}

/* お気に入りが0件でCTAをJSが隠したときは、上の余白を作る要素がこれで
   全部無くなる。「最近見た」に切り替えると一覧の最後がクイックナビに
   潜るので、同じ余白を .p-fav が肩代わりする。
   CTAが出ているときは足さない（CTAとの間に無駄な隙間ができるため） */
.l-page--favorite:has(.p-cta--fav[hidden]) .p-fav {
  padding-bottom: var(--fav-nav-clear);
}

/* =========================================================
   ミニ（375px未満）
   - ヘッダーの件数バッジは、ロゴと並ぶと幅が足りないため「全て募集中」を省く
   - クイックナビのラベルは、折り返すとナビ全体が高くなるので1行に収める
   ========================================================= */
@media screen and (max-width: 374px) {
  .c-live__note {
    display: none;
  }

  /* 320pxでは1項目66pxのうち左右padding 8px×2を引いて文字の置き場所が50pxしか
     残らず、「お気に入り」（55.5px必要）と「LINE相談」が2行に折り返す。すると
     ナビが68.4px→82.8pxに膨らみ、下の逃げを食ってフッターのコピーライトが
     裏に隠れる。paddingを外して隙間を詰め、置き場所を69pxに広げて1行に戻す。
     押せる範囲は flex: 1 1 0 が決めているので、paddingを外しても狭くならない */
  .p-quicknav__list {
    gap: 4px;
  }

  .p-quicknav__link {
    padding-inline: 0;
  }

  /* お気に入り・最近見たのカードは、画像120pxのままだと本文の幅が足りず、
     価格・住所・敷礼仲が次々と折り返してカードが縦に伸びる（360pxで1枚166px、
     321pxでは205px。375pxの149pxより長い）。画像を96pxに縮めて本文を24px広げると
     1枚127pxに収まる。360pxはAndroidで最も多い幅なので、375px未満はすべてこの扱いにする */
  .p-fav .c-rowcard__media {
    width: 96px;
    height: 96px;
  }

  /* ハートは画像の右上に重ねているので、96pxから逆算し直す */
  .p-fav .c-card__fav--row {
    left: calc(96px - 8px - 24px);
  }

  /* AI確認フローのラベルは4列なので、1列に使えるのは320pxで60px・360pxで68px。
     12pxだと「募集終了なら」に69px必要で、どちらも3行に折り返してノードと
     ラベルの縦位置がずれる。gapを0にしても320pxでは64pxしか作れず届かないため、
     10pxまで落として2行に収める（375px以上は12pxのまま） */
  .p-status__flow-labels li {
    font-size: 10px;
  }
}

/* =========================================================
   320px以下: 左右の余白を詰めて、本文の幅を確保する
   ========================================================= */
@media screen and (max-width: 320px) {
  :root {
    --side: 16px;
  }

  /* MVのリード文は<br>で3行に固定している。3行目（2026-10-15 までの「募集が終わった物件は、その瞬間に
     掲載を止めています。」。いまの「募集が終わったと分かった物件は、掲載を止めています。」は1文字短い）が12px・字間.96pxのままだと311.2px必要で、320pxで使える
     288pxに23.2px足りず4行に割れる。11px・字間.5pxで275.4px（余り12.6px）に収める。
     字間を0にすれば12pxのままでも286.2pxで収まるが、余りが1.8pxしかなく、
     Webフォントの読み込み前に端末フォントで描かれる瞬間に崩れるため採らない */
  .p-hero__lead {
    font-size: 11px;
    letter-spacing: .5px;
  }

  /* お知らせページの本文は<br>で改行位置を決めているので、
     最長行（トップページより目的のページをお探しください。）が
     折り返さないよう字間を詰める */
  .p-message__lead {
    letter-spacing: normal;
  }

  /* CTAの白いカードは --side を使っていないので個別に詰める（上下の20pxは維持） */
  .p-cta__inner {
    padding-inline: 16px;
  }

  /* 並び替え・条件保存・条件変更の帯は、320pxでは中身に272px（288px − 左右8px×2）しか
     使えず、1列は90.7px。文字の置き場所はgap 4pxとアイコン16pxを引いた70.7pxで、
     15pxだと初期値の「おすすめ順」（80.2px）すら…で省かれてしまう。13pxなら70.2pxで
     収まる（「賃料の安い順」など長い項目名は省かれるが、それは許容） */
  .p-result__tool-text {
    font-size: 13px;
  }

  /* 「3つの質問」は、質問文（③ 入居したい時期＝118px）と答え（選択してください＝107px）が
     14pxのままだと1行の115px枠に並びきらない。字間と左右の余白を詰めて2行送りを防ぐ */
  .p-line__qa-head,
  .p-line__qa-item {
    padding-inline: 4px;
  }

  .p-line__qa-head,
  .p-line__qa-key,
  .p-line__qa-answer {
    font-size: 13px;
    letter-spacing: normal;
  }
}

/* =========================================================
   PCレイアウト（額縁 .l-desk）
   ---------------------------------------------------------
   ここから下はすべて min-width のメディアクエリに閉じてあるので、
   1023px以下（スマホ・タブレット縦）の表示には一切影響しない。

   考え方: 中央のスマホ幅カラム（.l-page＝430px）はそのまま動かさず、
   PCで余る左右の空間に「額縁」（.l-desk）を敷く。額縁は position:fixed で
   画面に貼り付くため、スクロールで動くのは中央のカラムだけになる。

   幅の段階:
     〜1023px  額縁を出さない（現状のまま）
     1024px〜  背景と、中央カラムを白い板として浮かせるところまで。
               左右に残るのは (1024 − 430) ÷ 2 = 297px しかなく、
               ブランド面が成立しないので brand / side は出さない
     1200px〜  左右が (1200 − 430) ÷ 2 = 385px 取れるので brand / side を出す
   ========================================================= */

/* 既定では額縁ごと無い扱い。メディアクエリの中でしか背景画像を指定していないので、
   スマホでは hero.jpg の追加ダウンロードも発生しない */
.l-desk {
  display: none;
}

@media screen and (min-width: 1024px) {
  .l-desk {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    /* 背景がクリックを奪わないようにする。押せる必要のある .l-desk__side だけ戻す */
    pointer-events: none;
  }

  /* 背景写真。元画像が776pxと小さいのでPC全幅では粗くなるが、ぼかしで吸収する。
     ぼかすと縁が透けるので、1.06倍に膨らませてから切り取る */
  .l-desk__bg {
    position: absolute;
    inset: 0;
    background: url("/images/hero.jpg") center / cover no-repeat;
    filter: blur(6px);
    transform: scale(1.06);
  }

  /* 中央の白い板を浮かせるため、背景全体をネイビーで沈める。
     左のブランド面は白文字なので、左側だけ濃くしてコントラストを確保する */
  .l-desk__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgba(20, 40, 66, .82) 0%,
      rgba(20, 40, 66, .58) 42%,
      rgba(20, 40, 66, .68) 100%);
  }

  /* 中央カラムを板にする。max-width:430px と margin-inline:auto は既存のまま使う。
     min-height を入れるのは、中身が短いページで板が途中で切れないようにするため */
  .l-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: #fff;
    box-shadow: 0 0 64px rgba(11, 28, 48, .45);
  }

  /* この幅では左右に置ききれないので出さない（1200px以上で出す） */
  .l-desk__brand,
  .l-desk__side {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  /* 左右の面は、中央カラム（430px＝半分215px）の外側 24px から先を使い、
     画面の端には 40px の余白を残す。
     したがって使える幅は 50% − 215px − 24px − 40px = calc(50% - 279px)。
     right/left の 239px は 215px（カラムの半分）＋ 24px（すき間） */
  .l-desk__brand,
  .l-desk__side {
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);
  }

  /* ---- 左: ブランド面 ---- */
  .l-desk__brand {
    right: calc(50% + 239px);
    width: min(440px, calc(50% - 279px));
    gap: 12px;
    color: #fff;
  }

  /* Outfit は 400/500 しか読み込んでいないので 500 で組む。
     幅に追従させて、1200pxでは64px・1600px以上では112pxで頭打ちにする */
  .l-desk__logo {
    font-family: var(--font-logo);
    font-size: clamp(64px, 7vw, 112px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
  }

  .l-desk__name {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .82);
  }

  .l-desk__catch {
    margin-top: 12px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1.92px;
  }

  .l-desk__lead {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: .96px;
    color: rgba(255, 255, 255, .78);
  }

  /* イラスト・アイコンはすべて背景画像で置く。<img> だと 1023px以下で display:none でも
     ブラウザがダウンロードするため、スマホが見えない画像を毎ページ取りに行ってしまう */
  .l-desk__illust {
    align-self: flex-start;
    width: 121px;
    height: 184px;
    margin-top: 4px;
    background-image: url("/images/couple-walk.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* ---- 右: 稼働状況＋主要導線 ---- */
  .l-desk__side {
    left: calc(50% + 239px);
    width: min(300px, calc(50% - 279px));
    gap: 12px;
    /* 額縁全体は pointer-events:none なので、押せるこの面だけ戻す */
    pointer-events: auto;
  }

  .l-desk__status {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(11, 28, 48, .24);
  }

  .l-desk__status-head {
    display: flex;
  }

  .l-desk__status-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .l-desk__status-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--c-gray);
  }

  .l-desk__status-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--c-navy);
  }

  .l-desk__status-num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
  }

  .l-desk__status-num--sm {
    font-size: 16px;
  }

  .l-desk__status-unit {
    font-size: 12px;
    font-weight: 600;
  }

  .l-desk__nav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .l-desk__nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 24px rgba(11, 28, 48, .18);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-navy);
    transition: background-color .2s, transform .2s;
  }

  .l-desk__nav-link:hover {
    background: #fff;
    transform: translateX(2px);
  }

  .l-desk__nav-label {
    flex: 1 1 auto;
  }

  .l-desk__nav-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .l-desk__nav-icon--search { background-image: url("/images/icons/nav-search.svg"); }
  .l-desk__nav-icon--heart { background-image: url("/images/icons/nav-heart.svg"); }
  .l-desk__nav-icon--phone { background-image: url("/images/icons/phone.svg"); }
  .l-desk__nav-icon--line { background-image: url("/images/icons/line-logo.svg"); }

  .l-desk__nav-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-image: url("/images/icons/chevron-right.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .5;
  }

  /* LINEだけは差し色（ブランド緑）。SVGは元の色を持っているので、
     緑の上で埋もれないよう白に転写する */
  .l-desk__nav-link--line {
    background: var(--c-line-brand);
    color: #fff;
  }

  .l-desk__nav-link--line:hover {
    background: #05b34c;
  }

  .l-desk__nav-link--line .l-desk__nav-icon,
  .l-desk__nav-link--line .l-desk__nav-arrow {
    filter: brightness(0) invert(1);
  }
}

/* 縦に短い画面では、ブランド面が上下にはみ出す（縦中央そろえなので両端が切れる）。
   優先度の低いものから落として、ロゴとキャッチだけは必ず収まるようにする */
@media screen and (min-width: 1200px) and (max-height: 860px) {
  .l-desk__illust {
    display: none;
  }
}

@media screen and (min-width: 1200px) and (max-height: 720px) {
  .l-desk__lead {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-desk__nav-link {
    transition: none;
  }

  .l-desk__nav-link:hover {
    transform: none;
  }
}

/* =========================================================
   パンくず（c-crumb）— 物件詳細の先頭
   階層は深くないので1行に収め、はみ出すときは横スクロールさせる。
   折り返して2行になると、その下の物件名の位置が物件ごとにずれてしまう。
   ========================================================= */
.c-crumb {
  padding: 12px var(--side) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.c-crumb::-webkit-scrollbar {
  display: none;
}

.c-crumb__list {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.c-crumb__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.6;
}

.c-crumb__sep {
  color: var(--c-gray-light);
}

.c-crumb__link {
  color: var(--c-gray);
}

.c-crumb__current {
  color: var(--c-ink);
  /* 物件名は長い。現在地だけ省略して、前の段（エリア・駅）が必ず見えるようにする */
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   内部リンク集（p-tagdir）— 物件詳細の最下部
   検索エンジンが次にたどる先を置く場所。人にとっては
   「この条件で他も見る」の入口になる。
   ========================================================= */
.p-tagdir {
  padding: 24px var(--side) 8px;
  background: var(--c-beige);
}

.p-tagdir__row + .p-tagdir__row {
  margin-top: 16px;
}

.p-tagdir__label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-gray);
}

.p-tagdir__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 帯の地色（ベージュ）とタグの既定色が同じなので、ここでは白に置く */
.p-tagdir__links .c-tag {
  background: #fff;
}

/* =========================================================
   周辺情報（p-detail__geo）— 地図とストリートビュー
   ⚠ `.p-detail__map` とは別物。あちらは住所の横にある外部リンク。
   ========================================================= */
.p-detail__geo-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.p-detail__geo-tab {
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: #fff;
  font-size: 13px;
  line-height: 1;
  color: var(--c-gray);
}

.p-detail__geo-tab.is-on {
  border-color: var(--c-navy);
  background: var(--c-blue-pale);
  color: var(--c-navy);
  font-weight: 500;
}

.p-detail__geo-frame {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  /* aspect-ratio 非対応（iOS 15 より前）でも枠が潰れないよう高さを先に置く */
  min-height: 220px;
  aspect-ratio: 4 / 3;
}

.p-detail__geo-frame.is-hidden {
  display: none;
}

.p-detail__geo-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 0;
}

/* タブが無い（ストリートビューの写真が無い）ことを、壊れて見えないように伝える */
.p-detail__geo-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-gray-light);
}

.p-detail__geo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* =========================================================
   受付ページのリード（p-lead）— お部屋探しのご相談 / 貸したいオーナー様へ
   見出しとフォームの間に置く「何ができるか」の短い箇条書き。
   ⚠ ここに成約率や平均入居日数のような作った数字を置かない（出すのは在庫の実数だけ）。
   ========================================================= */
.p-lead__points {
  margin: 0 var(--side) 24px;
  padding: 16px;
  border-radius: 8px;
  background: var(--c-beige);
}

.p-lead__point {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-ink);
}

.p-lead__point + .p-lead__point {
  margin-top: 8px;
}

.p-lead__point::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "・";
  color: var(--c-navy);
}

/* ==========================================================================
   会員（2026-10-15〜・居住用ポータル全面テコ入れの段5）
   ヘッダーのログイン入口・ログインの小窓（components/AuthModal.astro）・会員登録ページ（pages/register.astro）
   ========================================================================== */

/* ヘッダー右端の「ログイン／パーソナルサイト」。掲載件数の右に小さく置く */
.l-header__auth {
  flex-shrink: 0;
  margin-left: 8px;
}

.l-header__auth-link {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--c-navy);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--c-navy);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* 狭い画面では件数の「全て募集中」を省いて、ログインの入口の場所を空ける */
@media (max-width: 400px) {
  .l-header .c-live__note {
    display: none;
  }
}

/* さらに狭い画面（360px など）は、ロゴの文字（Osekkai）も省いてマークだけにする。
   ロゴ＋件数＋「ログイン／会員メニュー」が1行に収まらず、右端がはみ出していた（2026-10-15） */
@media (max-width: 374px) {
  .l-header .l-header__name {
    display: none;
  }
}

/* 会員メニュー（components/HeaderAuth.astro・開け閉めは scripts/member.ts） */
.l-header__member {
  position: relative;
}

.l-header__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 4;
  min-width: 176px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 40, 70, .16);
}

.l-header__menu-link {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  color: var(--c-navy);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.l-header__menu-link:hover,
.l-header__menu-link:focus-visible {
  background: var(--c-beige);
}

/* ログインの小窓 */
.c-auth {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--side);
  background: rgba(39, 39, 42, .45);
}

.c-auth[hidden] {
  display: none;
}

.c-auth__panel {
  position: relative;
  width: 100%;
  max-width: 390px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px 24px 24px;
  border-radius: 8px;
  background: #fff;
}

.c-auth__close {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--c-gray);
  cursor: pointer;
}

.c-auth__title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
}

.c-auth__form {
  display: grid;
  gap: 12px;
}

.c-auth__error {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-error);
}

.c-auth__link {
  justify-self: center;
  font-size: 13px;
  color: var(--c-navy);
}

.c-auth__google {
  margin-top: 16px;
}

.c-auth__google-btn {
  display: block;
  padding: 12px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  color: var(--c-ink);
  text-decoration: none;
}

.c-auth__intro {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.c-auth__intro-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}

.c-auth__intro-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-gray);
}

/* 会員登録ページ：3段のランクアップ表示 */
.p-reg__steps {
  display: grid;
  gap: 12px;
  margin: 24px 0 32px;
  list-style: none;
}

.p-reg__step {
  padding: 16px;
  border-radius: 8px;
  background: var(--c-beige);
}

.p-reg__step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.p-reg__step-no {
  font-family: var(--font-logo);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--c-navy);
}

.p-reg__step-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
}

.p-reg__step-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  color: var(--c-navy);
}

.p-reg__step-lead,
.p-reg__step-note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-gray);
}

.p-reg__benefits {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  list-style: none;
}

.p-reg__benefit {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink);
}

.p-reg__benefit::before {
  content: "";
  position: absolute;
  top: .65em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-navy);
}

.p-reg__message {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-error);
}

.p-reg__login {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--c-gray);
}

.p-reg__login-link {
  padding: 0 2px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-navy);
  text-decoration: underline;
  cursor: pointer;
}

.p-reg__done {
  margin-top: 24px;
  padding: 20px;
  border-radius: 8px;
  background: var(--c-green-pale);
}

.p-reg__done-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
}

.p-reg__done-text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink);
}

/* 会員かどうかの出し分け（scripts/member.ts が hidden を付け外しする）と、会員登録ページの送信後の切り替え。
   display を指定した部品（.c-btn・.l-header__auth-link・.p-form__body など）は hidden 属性だけでは消えないので、ここで必ず消す */
[data-auth][hidden],
.p-reg [hidden] {
  display: none !important;
}

/* ==========================================================================
   会員限定のお部屋（2026-10-15〜・居住用ポータル全面テコ入れの段5-2）
   物件ページの案内（components/PropertyDetail.astro）と、会員の画面で鮮明な写真へ差し替えたあとの印（scripts/member.ts）
   ========================================================================== */

/* 写真の送りボタン：1枚のときは app.js が hidden を付ける（会員の差し替えで枚数が変わるため常に置いてある） */
.p-detail__nav[hidden] {
  display: none;
}

.p-detail__members {
  margin: 16px 16px 0;
  padding: 16px;
  border: 1px solid #c9a24a;
  border-radius: 8px;
  background: #1f4a3d;
  color: #fff;
}

.p-detail__members-badge {
  font-family: var(--font-logo);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #e3c47a;
}

.p-detail__members-text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.p-detail__members-text[hidden] {
  display: none;
}

.p-detail__members-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.p-detail__members-login {
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

/* 会員の画面で鮮明な写真へ差し替えたカード：写真の左下に小さな札 */
.c-card__media.is-member-unlocked {
  position: relative;
}

.c-card__media.is-member-unlocked::after {
  content: "会員さまだけに公開中";
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 2px 8px;
  border: 1px solid #c9a24a;
  border-radius: 4px;
  background: rgba(31, 74, 61, .9);
  font-size: 11px;
  line-height: 1.6;
  color: #fff;
}

/* ==========================================================================
   物件ページの「空き状況を確認する」「初期費用を確認する」（2026-10-15〜・段6）
   ボタンは components/DetailInquiryCta.astro、会員の送信は scripts/member.ts、
   会員登録ページの「お問い合わせ物件」とすでに会員だったときの案内は pages/register.astro
   ========================================================================== */
.p-detail__inq {
  margin: 16px var(--side) 0;
}

.p-detail__inq-btns {
  display: flex;
  gap: 8px;
}

.p-detail__inq-btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--c-navy);
  border-radius: 40px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--c-navy);
  transition: filter .1s ease;
}

.p-detail__inq-btn.is-primary {
  background: var(--c-navy);
  color: #fff;
}

.p-detail__inq-btn:hover {
  filter: brightness(1.08);
}

.p-detail__inq-btn.is-sending {
  opacity: .6;
  pointer-events: none;
}

.p-detail__inq-btn.is-done {
  border-color: var(--c-green);
  background: var(--c-green-pale);
  color: var(--c-green);
  cursor: default;
}

.p-detail__inq-note,
.p-detail__inq-msg {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-gray);
}

.p-detail__inq-msg {
  font-size: 13px;
  color: var(--c-ink);
}

.p-detail__inq-msg.is-error {
  color: var(--c-error);
}

.p-detail__inq [hidden] {
  display: none;
}

.p-reg__listing {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 8px;
  background: var(--c-blue-pale4);
}

.p-reg__listing-head {
  font-size: 12px;
  color: var(--c-gray);
}

.p-reg__listing-name {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
}

.p-reg__listing-req {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-navy);
}

.p-reg__listing-meta {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-gray);
}

.p-reg__member {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--c-navy);
  border-radius: 8px;
}

.p-reg__member-msg {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink);
}

/* ==========================================================================
   TOP の会員の案内・23区からさがす（2026-10-16〜・居住用ポータル全面テコ入れ F5）
   会員の案内は物件ページの会員限定の帯（.p-detail__members）と同じ深緑と金の線で、
   「会員さまだけに公開」を同じ見た目で覚えてもらう
   ========================================================================== */
.p-topmembers {
  margin: 40px var(--side) 0;
  padding: 24px 20px;
  border: 1px solid #c9a24a;
  border-radius: 8px;
  background: #1f4a3d;
  color: #fff;
}

.p-topmembers__badge {
  font-family: var(--font-logo);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #e3c47a;
}

.p-topmembers__title {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.p-topmembers__count {
  font-family: var(--font-logo);
  font-size: 26px;
  font-weight: 600;
  color: #e3c47a;
}

.p-topmembers__benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}

.p-topmembers__benefit {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.7;
}

.p-topmembers__benefit::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e3c47a;
}

.p-topmembers__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.p-topmembers__login {
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

.p-topwards {
  margin-top: 56px;
}

.p-topwards__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-inline: var(--side);
}

.p-topwards__count {
  margin-left: 6px;
  font-size: 11px;
  color: var(--c-gray);
}

/* 物件ページの「似た条件のお部屋」（F6）。カードは TOP と同じ横並び。
   本文（.p-detail__body）の左右の余白の外まで流し、横に送れることが分かるようにする */
.p-detail__similar-scroller {
  margin-top: 0;
  margin-inline: calc(var(--side) * -1);
}

/* 会員登録の完了：送り先と再送（2026-10-16〜・F11） */
.p-reg__done-email {
  font-weight: 700;
  word-break: break-all;
}

.p-reg__resend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.p-reg__resend-btn {
  padding: 8px 14px;
  border: 1px solid var(--c-navy);
  border-radius: 40px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--c-navy);
  cursor: pointer;
}

.p-reg__resend-btn:disabled {
  opacity: .6;
  cursor: default;
}

/* ==========================================================================
   PC用の画面（2026-10-16〜・991px以上 かつ <body class="has-pc"> のページだけ）
   --------------------------------------------------------------------------
   事業用（TENANTs）と同じく、HTMLは1つのまま、991px以上を幅いっぱいのPC用の画面に切り替える。
   990px以下（スマホ・タブレット）の見た目は変えない＝ここより下はすべて min-width のメディアクエリと
   .has-pc の中に閉じてある（PCでだけ出す部品を消す先頭の1節を除く）。
   .has-pc は BaseLayout の pcLayout が付ける。まだPC用の画面になっていないページは、
   従来どおりスマホ幅のカラム＋左右の額縁（上の「PCレイアウト（額縁 .l-desk）」節）のまま。

   中身の幅は最大 --pc-wrap（1120px）。帯の地色は画面いっぱいに敷いたまま、中身だけを中央へ寄せるため、
   節の左右の余白に --pc-inline（画面の端から最低32px・それ以上は中央の1120pxに収まる幅）を使う。
   ⚠ --pc-inline の 100% は「使った場所の幅」で決まる。.l-page の直下（幅いっぱい）の要素にだけ使うこと。
   ========================================================================== */

/* PCでだけ出す部品。スマホ・タブレットと、PC用の画面になっていないページでは出さない */
.l-header__logo--pc,
.l-header__nav,
.l-header__fav,
.l-header__line,
.p-search__quick,
.p-search__more {
  display: none;
}

@media screen and (min-width: 991px) {
  .has-pc {
    --pc-wrap: 1120px;
    --pc-gutter: 32px;
    --pc-inline: max(var(--pc-gutter), calc((100% - var(--pc-wrap)) / 2));
    --pc-header-h: 72px;
  }

  /* 1024px以上で付く額縁用の影（.l-page の「白い板」）は、額縁を出さないので消す */
  .has-pc .l-page {
    max-width: none;
    padding-top: var(--pc-header-h);
    box-shadow: none;
  }

  /* ---- ヘッダー：幅いっぱい・画面の上に固定 ---- */
  .has-pc .l-header {
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
    max-width: none;
    height: var(--pc-header-h);
    justify-content: flex-start;
    gap: 16px;
    padding: 0 32px;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    background: rgba(255, 255, 255, .96);
  }

  /* 戻る矢印の代わりにロゴ（PCのヘッダーはどのページも同じ形） */
  .has-pc .l-header__back {
    display: none;
  }

  .has-pc .l-header__logo--pc {
    display: flex;
  }

  .has-pc .l-header__name {
    font-size: 20px;
  }

  .has-pc .l-header__nav {
    display: block;
    margin-left: 16px;
  }

  .has-pc .l-header__nav-list {
    display: flex;
    gap: 24px;
  }

  .has-pc .l-header__nav-link {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    white-space: nowrap;
    color: var(--c-ink);
    transition: color .2s;
  }

  .has-pc .l-header__nav-link:hover {
    color: var(--c-navy-strong);
  }

  /* 件数は 1200px 以上で出す（狭いとメニュー・お気に入り・ログイン・LINEと1行に並びきらない。
     TOPは稼働状況の欄にも件数がある） */
  .has-pc .l-header .c-live {
    display: none;
  }

  .has-pc .l-header__fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--c-ink);
  }

  .has-pc .l-header__fav:hover {
    color: var(--c-navy-strong);
  }

  /* アイコンは背景画像。<img> だとスマホで見えないのに読み込んでしまうため、ここ（PCの節）で指定する */
  .has-pc .l-header__icon {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .has-pc .l-header__icon--heart {
    background-image: url("/images/icons/nav-heart.svg");
  }

  .has-pc .l-header__icon--line {
    background-image: url("/images/icons/line-logo.svg");
  }

  .has-pc .l-header__auth {
    margin-left: 8px;
  }

  .has-pc .l-header__auth-link {
    padding: 8px 16px;
    font-size: 13px;
  }

  .has-pc .l-header__line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 40px;
    background: var(--c-line-brand);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    color: #fff;
    transition: background-color .2s;
  }

  .has-pc .l-header__line:hover {
    background: #05b34c;
  }

  /* 画面下のメニューは使わない（同じ行き先はヘッダーにある） */
  .has-pc .p-quicknav {
    display: none;
  }

  /* 短い通知は、画面下のメニューの上ではなく画面の下に出す */
  .has-pc .c-toast {
    bottom: 32px;
  }

  /* ---- 見出し ---- */
  .has-pc .c-sechead--inset {
    padding-left: 0;
  }

  .has-pc .c-sechead__en {
    font-size: 13px;
    letter-spacing: .16em;
  }

  .has-pc .c-sechead__ja {
    font-size: 26px;
    letter-spacing: .1em;
  }

  .has-pc .c-sechead__link[href]:hover .c-sechead__ja {
    color: var(--c-navy-strong);
  }

  /* ---- 物件カード：写真を少しだけ寄せて、押せることを伝える ---- */
  .has-pc .c-card__img,
  .has-pc .c-rowcard__img {
    transition: transform .4s ease;
  }

  .has-pc .c-card__link:hover .c-card__img,
  .has-pc .c-rowcard__link:hover .c-rowcard__img {
    transform: scale(1.04);
  }

  /* ---- TOP：ヒーロー ----
     ぼかした写真＋紺のベールを地に敷き、左にコピー、右に写真のカード（事業用のTOPと同じ組み方）。
     写真の元画像は776pxと小さいので、全面には鮮明に引き伸ばさず、カードの大きさで見せる */
  .has-pc .p-hero {
    --hero-card-w: 400px;
    --hero-edge: max(40px, calc((100% - var(--pc-wrap)) / 2));
    height: 520px;
    margin: 8px 8px 0;
    border-radius: 16px;
  }

  .has-pc .p-hero::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: url("/images/hero.jpg") center / cover no-repeat;
    filter: blur(10px);
  }

  .has-pc .p-hero__veil {
    background: linear-gradient(90deg,
      rgba(20, 40, 66, .8) 0%,
      rgba(20, 40, 66, .6) 50%,
      rgba(20, 40, 66, .4) 100%);
  }

  /* 写真のカード。検索欄が下から食い込む（96px）ぶんを除いた高さの中で、上下中央に置く */
  .has-pc .p-hero__bg {
    inset: auto;
    top: calc((520px - 96px - var(--hero-card-w) * 2 / 3) / 2);
    right: var(--hero-edge);
    z-index: 1;
    width: var(--hero-card-w);
    height: calc(var(--hero-card-w) * 2 / 3);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(11, 28, 48, .32);
  }

  .has-pc .p-hero__bg-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* 線画のイラストは 1200px 以上で、写真のカードの左下に重ねる（狭いとコピーとぶつかる） */
  .has-pc .p-hero__illust {
    display: none;
  }

  .has-pc .p-hero__copy {
    top: 0;
    right: auto;
    bottom: 96px;
    left: var(--hero-edge);
    z-index: 1;
    justify-content: center;
    gap: 20px;
    width: min(560px, calc(100% - var(--hero-card-w) - var(--hero-edge) * 2 - 40px));
  }

  .has-pc .p-hero__title {
    align-items: flex-start;
    gap: 10px;
  }

  /* スマホは帯（::before）の幅を文字数から決め打ちしている。PCは文字が大きいので、文字そのものに地を敷く */
  .has-pc .p-hero__line::before {
    display: none;
  }

  .has-pc .p-hero__line-text {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 4px;
    background: var(--c-navy-strong);
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.35;
    letter-spacing: .1em;
  }

  .has-pc .p-hero__lead {
    font-size: 15px;
    line-height: 2;
    letter-spacing: .08em;
  }

  /* ---- TOP：検索欄（ヒーローに下から食い込む白いカード） ---- */
  .has-pc .p-search {
    gap: 16px;
    width: calc(100% - var(--pc-gutter) * 2);
    max-width: 1056px;
    margin: -96px auto 0;
    padding: 28px 32px;
    box-shadow: 0 16px 40px rgba(44, 83, 126, .18);
  }

  .has-pc .p-search__field {
    padding: 10px 10px 10px 16px;
  }

  .has-pc .p-search__field-btn {
    padding: 10px 28px;
    font-size: 14px;
  }

  /* エリア・賃料・間取りでさがす欄（PCだけ）。矢印は背景画像（ここで指定するのでスマホは読み込まない） */
  .has-pc .p-search__quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 16px;
  }

  .has-pc .p-search__quick-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .has-pc .p-search__quick-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--c-gray);
  }

  .has-pc .p-search__quick-select {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--c-beige) url("/images/icons/chevron-down.svg") right 14px center / 18px no-repeat;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--c-ink);
    cursor: pointer;
  }

  .has-pc .p-search__quick-select:focus-visible {
    border-color: var(--c-navy);
  }

  /* 検索結果へ進むボタンは「募集中」の緑（.c-btn--result と同じ決まり） */
  .has-pc .p-search__quick-btn {
    height: 48px;
    padding: 0 32px;
    border-radius: 4px;
    background: var(--c-green);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    white-space: nowrap;
    color: #fff;
    transition: filter .2s;
  }

  .has-pc .p-search__quick-btn:hover {
    filter: brightness(1.06);
  }

  .has-pc .p-search__tags .c-tag:hover {
    border-color: var(--c-navy);
    color: var(--c-navy);
  }

  .has-pc .p-search__more {
    display: inline-block;
    align-self: flex-end;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--c-navy);
  }

  /* ---- TOP：稼働状況（左に件数と説明、右に確認の流れの図） ---- */
  .has-pc .p-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
      "head  flow"
      "stats flow"
      "note  flow";
    align-items: center;
    gap: 16px 56px;
    margin: 72px var(--pc-inline) 0;
    padding: 40px 48px;
  }

  .has-pc .p-status__head {
    grid-area: head;
  }

  .has-pc .p-status__head-text {
    font-size: 18px;
  }

  .has-pc .p-status__stats {
    grid-area: stats;
  }

  .has-pc .p-status__stat {
    padding: 20px 24px;
  }

  .has-pc .p-status__stat-num {
    font-size: 28px;
  }

  .has-pc .p-status__flow {
    grid-area: flow;
  }

  .has-pc .p-status__flow-labels li {
    font-size: 13px;
  }

  .has-pc .p-status__note {
    grid-area: note;
    margin-top: 0;
    padding: 0;
    font-size: 13px;
  }

  /* ---- TOP：各節の左右の余白（中身を中央の1120pxに寄せる） ---- */
  .has-pc .p-category,
  .has-pc .p-topwards {
    margin-top: 80px;
    padding-inline: var(--pc-inline);
  }

  /* ---- TOP：人気のさがし方（横スクロールをやめて折り返す） ---- */
  .has-pc .p-category__scroller {
    margin-top: 24px;
    padding-inline: 0;
    overflow: visible;
  }

  .has-pc .p-category__chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    width: auto;
  }

  .has-pc .p-category__row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .has-pc .c-chip {
    gap: 8px;
    padding: 12px 18px;
    transition: background-color .2s;
  }

  .has-pc .c-chip:hover {
    background: var(--c-blue-pale3);
  }

  .has-pc .c-chip__text {
    font-size: 14px;
  }

  /* ---- TOP：新着・PICK UP（横スクロールをやめて、1200px以上は4列×2段・それ未満は3列×2段） ---- */
  .has-pc .p-pickup {
    margin-top: 80px;
    padding: 64px var(--pc-inline);
  }

  .has-pc .p-pickup__scroller {
    margin-top: 32px;
    padding: 0;
    overflow: visible;
  }

  .has-pc .p-pickup__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
    width: auto;
  }

  /* 8件届くので、3列のときは2段（6件）にそろえる。段の途中で切れると欠けて見える */
  .has-pc .p-pickup__list > :nth-child(n+7) {
    display: none;
  }

  .has-pc .p-pickup .c-card {
    width: auto;
  }

  /* 写真の素材は3:2。高さ185pxの決め打ちだと、幅が変わるぶん上下が切れる */
  .has-pc .p-pickup .c-card__media {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  /* ---- TOP：会員限定のお部屋の案内（左に件数と約束、右にボタン） ---- */
  .has-pc .p-topmembers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "badge    actions"
      "title    actions"
      "benefits actions";
    align-items: center;
    column-gap: 56px;
    margin: 80px var(--pc-inline) 0;
    padding: 40px 48px;
  }

  .has-pc .p-topmembers__badge {
    grid-area: badge;
    font-size: 13px;
  }

  .has-pc .p-topmembers__title {
    grid-area: title;
    font-size: 24px;
  }

  .has-pc .p-topmembers__count {
    font-size: 36px;
  }

  .has-pc .p-topmembers__benefits {
    grid-area: benefits;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 28px;
  }

  .has-pc .p-topmembers__benefit {
    font-size: 14px;
  }

  .has-pc .p-topmembers__actions {
    grid-area: actions;
    min-width: 280px;
    margin-top: 0;
  }

  /* スマホは帯の中で文字だけのボタン。PCは右側に離れて置くので、金の線で囲んでボタンだと分かるようにする */
  .has-pc .p-topmembers .c-btn {
    width: 100%;
    border-color: #e3c47a;
    transition: background-color .2s;
  }

  .has-pc .p-topmembers .c-btn:hover {
    background: rgba(227, 196, 122, .12);
  }

  /* ---- TOP：デザイナーズ・リノベーション（横カードを2列）----
     3列にすると本文の幅が約200pxになり、「248,000円 / 管理費10,000円」の「円」だけが次の行へ落ちる */
  .has-pc .p-list {
    padding: 72px var(--pc-inline) 0;
  }

  .has-pc .p-list__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin-top: 28px;
  }

  .has-pc .c-rowcard {
    transition: border-color .2s;
  }

  .has-pc .c-rowcard:hover {
    border-color: var(--c-gray-light);
  }

  /* ---- TOP：人気エリア（横スクロールをやめて4列） ---- */
  .has-pc .p-area {
    padding: 80px var(--pc-inline) 0;
  }

  .has-pc .p-area__scroller {
    margin-top: 28px;
    padding: 0;
    overflow: visible;
  }

  .has-pc .p-area__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: auto;
  }

  .has-pc .p-area .c-tile {
    width: auto;
  }

  /* 写真の無い駅は紺のグラデーションの板なので、高くすると重く見える。スマホと同じ160pxのまま */
  .has-pc .p-area .c-tile__media {
    height: 160px;
  }

  /* 影と駅名はスマホの高さ（160px）から上の位置で決め打ちしているので、下から置き直す */
  .has-pc .p-area .c-tile__shade {
    top: auto;
    bottom: 0;
    height: 96px;
  }

  .has-pc .p-area .c-tile__name {
    top: auto;
    bottom: 14px;
    left: 16px;
    font-size: 18px;
  }

  .has-pc .p-area .c-tile__count {
    font-size: 13px;
  }

  /* ---- TOP：23区からさがす（区を6列の表に並べる） ---- */
  .has-pc .p-topwards__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
    padding-inline: 0;
  }

  .has-pc .p-topwards__list .c-tag {
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--c-ink);
    transition: background-color .2s;
  }

  .has-pc .p-topwards__list .c-tag:hover {
    background: var(--c-blue-pale3);
  }

  .has-pc .p-topwards__count {
    font-size: 12px;
  }

  /* ---- TOP：ペットと暮らす（写真のタイルを1枚） ----
     写真の元画像が409×272と小さいので、引き伸ばさずにその大きさで置く */
  .has-pc .p-pet {
    padding: 80px var(--pc-inline) 0;
  }

  .has-pc .p-pet__list {
    width: 409px;
    margin-top: 28px;
  }

  .has-pc .p-pet .c-tile__media {
    height: 272px;
  }

  /* スマホは細長い枠に合わせて切り抜き位置を決め打ちしているので、PCは写真全体を見せる */
  .has-pc .p-pet .c-tile__img--dog {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .has-pc .p-pet .c-tile__shade {
    top: auto;
    bottom: 0;
    height: 96px;
  }

  .has-pc .p-pet .c-tile__name {
    top: auto;
    bottom: 16px;
    left: 16px;
    font-size: 18px;
  }

  /* ---- TOP：ご相談（左に見出し、右に3ステップとボタン） ---- */
  .has-pc .p-cta {
    margin-top: 96px;
    padding: 64px var(--pc-inline);
  }

  .has-pc .p-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "head steps"
      "head actions";
    align-items: start;
    gap: 20px 56px;
    padding: 48px 56px;
  }

  .has-pc .p-cta__head {
    grid-area: head;
    align-self: center;
    gap: 12px;
  }

  .has-pc .p-cta__title {
    font-size: 32px;
  }

  .has-pc .p-cta__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .has-pc .p-cta__steps {
    grid-area: steps;
    gap: 8px;
    padding: 16px 20px;
  }

  .has-pc .p-cta__actions {
    display: grid;
    grid-area: actions;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .has-pc .p-cta__note {
    grid-column: 1 / -1;
  }

  /* ---- 駅・路線・エリアから探す（3つの開け閉めを横に並べる） ---- */
  .has-pc .p-browse {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: 32px;
    margin-top: 72px;
    padding-inline: var(--pc-inline);
  }

  .has-pc .p-browse .c-acc {
    padding-inline: 0;
  }

  /* ---- フッター（左にロゴ、中央に説明とリンク、右に会社の情報） ---- */
  .has-pc .l-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo about company"
      "sns  about company"
      "copy copy  copy";
    align-items: start;
    gap: 20px 64px;
    margin-top: 80px;
    padding: 64px var(--pc-inline) 40px;
  }

  .has-pc .l-footer__logo {
    grid-area: logo;
  }

  .has-pc .l-footer__sns {
    grid-area: sns;
  }

  .has-pc .l-footer__about {
    grid-area: about;
    align-items: flex-start;
    gap: 16px;
    padding-inline: 0;
  }

  .has-pc .l-footer__desc {
    text-align: left;
  }

  .has-pc .l-footer__links {
    flex-wrap: wrap;
    gap: 8px 24px;
  }

  .has-pc .l-footer__link:hover {
    color: var(--c-navy);
  }

  .has-pc .l-footer__company {
    grid-area: company;
    align-items: flex-start;
    padding-inline: 0;
  }

  .has-pc .l-footer__company-name,
  .has-pc .l-footer__company-row {
    text-align: left;
  }

  .has-pc .l-footer__copy {
    grid-area: copy;
    margin-top: 24px;
    text-align: left;
  }
}

@media screen and (min-width: 1200px) {
  .has-pc .l-header {
    gap: 20px;
  }

  .has-pc .l-header .c-live {
    display: flex;
    margin-left: auto;
  }

  /* 件数が右へ寄せる役を持つので、お気に入りは並びのまま */
  .has-pc .l-header__fav {
    margin-left: 8px;
  }

  .has-pc .p-hero {
    --hero-card-w: 480px;
  }

  .has-pc .p-hero__illust {
    display: block;
    top: calc((520px - 96px - var(--hero-card-w) * 2 / 3) / 2 + var(--hero-card-w) * 2 / 3 - 184px + 16px);
    right: calc(var(--hero-edge) + var(--hero-card-w) - 96px);
    z-index: 2;
  }

  .has-pc .p-pickup__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .has-pc .p-pickup__list > :nth-child(n+7) {
    display: flex;
  }
}

@media screen and (min-width: 991px) and (prefers-reduced-motion: reduce) {
  .has-pc .c-card__img,
  .has-pc .c-rowcard__img {
    transition: none;
  }

  .has-pc .c-card__link:hover .c-card__img,
  .has-pc .c-rowcard__link:hover .c-rowcard__img {
    transform: none;
  }
}

/* ==========================================================================
   OSEKKAI FAMILY への入口（居住用TOPの帯・40㎡以上の物件ページ・2026-10-20〜）
   --------------------------------------------------------------------------
   ファミリーは別サイト family.osekkai-rooms.jp（apps/family）。居住用の中の旧コーナー（/family/）は
   2026-10-29 に畳み、そのページ用の見た目（is-family・f- の部品・PCの額縁）はここから消した
   （lib/family/constants.ts の注記）。残すのは入口（components/FamilyEntrance.astro）だけ。
   紺のページの中でも入口だと分かるよう、ファミリーの色（白地・墨色・木の色・明朝）で出す。
   明朝の書体はこのサイトでは読み込まないので、手元の明朝で出る。
   ========================================================================== */
:root {
  --f-ink: #2b2622;
  --f-sub: #5e554d;
  --f-wood: #7a5638;
  --f-tint: #f4f2ef;
  --f-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --f-en: "Outfit", var(--font-base);
}

.f-entrance {
  margin: 56px var(--side) 0;
  padding: 32px 24px;
  border-radius: 4px;
  background: var(--f-tint);
  color: var(--f-ink);
}

.f-entrance__brand {
  font-family: var(--f-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--f-wood);
}

.f-entrance__title {
  margin-top: 10px;
  font-family: var(--f-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
}

.f-entrance__text {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--f-sub);
}

.f-entrance__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 14px 28px;
  border-radius: 2px;
  background: var(--f-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  color: #fff;
  transition: filter .2s;
}

.f-entrance__btn:active {
  filter: brightness(1.25);
}

/* 物件ページの中（.p-detail__body の左右の余白・40pxの間隔の中に置く） */
.f-entrance--detail {
  margin: 0;
  padding: 24px 20px;
}

@media screen and (min-width: 991px) {
  .has-pc .f-entrance__btn:hover {
    filter: brightness(1.25);
  }

  /* ---- 居住用TOPの入口（左に言葉・右にボタン） ---- */
  .has-pc .f-entrance:not(.f-entrance--detail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand btn"
      "title btn"
      "text  btn";
    align-items: center;
    gap: 0 48px;
    margin: 96px var(--pc-inline) 0;
    padding: 48px 56px;
  }

  .has-pc .f-entrance:not(.f-entrance--detail) .f-entrance__brand {
    grid-area: brand;
  }

  .has-pc .f-entrance:not(.f-entrance--detail) .f-entrance__title {
    grid-area: title;
    font-size: 30px;
  }

  .has-pc .f-entrance:not(.f-entrance--detail) .f-entrance__text {
    grid-area: text;
    max-width: 640px;
  }

  .has-pc .f-entrance:not(.f-entrance--detail) .f-entrance__btn {
    grid-area: btn;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f-entrance__btn {
    transition: none;
  }
}