/* ============================================================
   デザイントークン v02（2026-09-02 佐藤様イメージ反映）
   ※背景色は直接hexで記述（制作仕様書1章④）
   ============================================================ */
:root{
  color-scheme: only light;

  --ink:      #111111;
  --ink-2:    #6f6f6f;
  --hairline: #e6e6e4;
  --yellow:   #f5f500;   /* UIキーカラー */
  --shadow:   0 1px 2px rgba(17,17,17,.04), 0 10px 28px rgba(17,17,17,.07);

  --f-sans: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-en:   "Rubik", "Helvetica Neue", Arial, sans-serif;

  --r-sm: 6px;    /* 控えめ角丸 */
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 18px;  /* Company Profile / CTA 用 */

  --sb-w: 272px;
  --tb-h: 62px;
  --gut: 50px;          /* コンテンツ左右余白（PC） */
  --content-max: 1400px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ background:#ffffff; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:#ffffff; min-height:100vh;
  color:var(--ink);
  font-family:var(--f-sans); font-size:1rem; font-weight:300;
  line-height:1.9; letter-spacing:.02em;
}
.app{ min-height:100vh; background:#ffffff; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; line-height:1.6; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0;
  background:#111111; color:#ffffff;
  padding:.75rem 1.25rem; z-index:200;
}
.skip:focus{ left:0; }

.en{
  font-family:var(--f-en); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}

/* ============================================================
   サイドバー（fixed）
   ============================================================ */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sb-w);
  background:#ffffff;
  border-right:1px solid var(--hairline);
  display:flex; flex-direction:column;
  padding:2.5rem 1.5rem 1.5rem;
  overflow-y:auto;
  z-index:60;
}
.sidebar__logo{ display:block; width:128px; margin:0 auto; }
.sidebar__nav{ margin-top:3rem; display:flex; flex-direction:column; gap:.25rem; }
.nav-item{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.6rem 1rem;
  border-radius:var(--r-sm);
  text-decoration:none; font-size:1rem; font-weight:500;
  background:#ffffff;
}
.nav-item__label{ display:flex; flex-direction:column; line-height:1; }
.nav-item__jp{ font-size:1rem; font-weight:400; }
.nav-item__en{ display:block; margin-top:5px; font-size:9px; font-weight:400; color:var(--ink-2); }
.nav-item[aria-current="page"] .nav-item__en{ color:var(--ink); }
.nav-item::after{
  content:"▶"; font-size:.625rem; color:var(--ink); flex:none;
  transform:scale(.9);
}
.nav-item[aria-current="page"]{ background:#f5f500; }

.sidebar__foot{ margin-top:auto; padding-top:2.5rem; }
.nav-portal{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.95rem 1rem;
  border-radius:var(--r-sm);
  background:#f2f2f0;
  /* ★2026-09-28：.9375rem(15px) から 1rem(16px) に引き上げ。
     制作の決まり「本文・ナビ・ボタンは原則16px以上」に合わせた。
     非表示の間は誰も見ていなかったが、表に出す以上は例外を作らない。 */
  text-decoration:none; font-size:1rem; font-weight:400; line-height:1.4;
  color:var(--ink);
}
.nav-portal::after{ content:"▶"; font-size:.625rem; transform:scale(.9); flex:none; }
/* ★1行で収める。サイドバーの内寸は 272px − 左右padding 48px − ボタンのpadding 32px
   − ▶とすき間 22px ＝ 約170px。「業者様用空室確認」は8文字なので16pxでも128pxで収まる。
   折り返させないために nowrap を付けている（文言を長くすると溢れるので注意）。 */
.nav-portal__txt{ white-space:nowrap; }
.sidebar__copy{
  margin-top:1.25rem;
  font-family:var(--f-en); font-weight:300;
  font-size:.6875rem; letter-spacing:.04em; color:var(--ink-2);
}
@media (min-width:901px){ .sidebar__copy{ text-align:center; } }

/* モバイル：トップバー＋ドロワー */
.topbar{
  display:none;
  position:fixed; top:0; left:0; right:0; height:var(--tb-h);
  background:#ffffff;
  border-bottom:1px solid var(--hairline);
  z-index:70;
  align-items:center; gap:1rem; padding:0 1rem;
}
.topbar img{ height:37px; }
.burger{
  margin-left:auto; width:48px; height:48px; border:0; background:#ffffff; cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:12px; width:24px; height:2px; background:#111111;
  transition:transform .25s ease, opacity .2s ease;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:23px; }
.burger span:nth-child(3){ top:30px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.main{ margin-left:var(--sb-w); background:#ffffff; }
.inner{
  max-width:var(--content-max);
  padding:0 var(--gut) 5rem;
}

@media (max-width:900px){
  .sidebar{
    transform:translateX(-100%); transition:transform .28s ease;
    top:var(--tb-h); width:min(300px, 84vw);
  }
  .sidebar[data-open="true"]{ transform:none; box-shadow:0 0 0 100vmax rgba(17,17,17,.28); }
  :root{ --gut:20px; }
  .sidebar__logo{ display:none; }
  .sidebar{ padding-top:1.5rem; }
  .sidebar__nav{ margin-top:.75rem; }
  .nav-item{ padding:.5rem 1rem; }
  .company, .cta{ margin-left:calc(var(--gut) * -1); margin-right:calc(var(--gut) * -1); }
  .topbar{ display:flex; }
  .main{ margin-left:0; padding-top:var(--tb-h); }
  .inner{ padding:0 var(--gut) 4rem; }
}

/* ============================================================
   ヒーロー（カルーセル）
   ============================================================ */
.hero{ position:relative; }
.hero__frame{
  position:relative; overflow:hidden;
  background:#f2f2f0;
  aspect-ratio:1600/835;   /* PC：横長（新素材のネイティブ比率） */
}
.hero__slide{
  position:absolute; inset:0; display:block; margin:0;
  opacity:0; transition:opacity .5s ease;
}
.hero__slide.is-show{ opacity:1; }
.hero__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__dots{
  display:flex; justify-content:center; gap:.6rem;
  padding:1.1rem var(--gut) 0;
}
.hero__dots button{
  width:56px; height:5px; border:0; border-radius:3px;
  background:#e0e0dd; cursor:pointer; padding:0;
}
.hero__dots button[aria-current="true"]{ background:#f5f500; }
@media (max-width:720px){
  .hero__frame{ aspect-ratio:800/1200; }   /* スマホ：縦長（新素材のネイティブ比率） */
  .hero__dots{ padding:.9rem 20px 0; }
  .hero__dots button{ width:36px; }
}

.main-contents-ttl{
  font-family:var(--f-en); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.75rem, 4vw, 2.75rem); letter-spacing:.08em;
  color:var(--ink); margin:3.5rem 0 2rem; text-align:center;
}

/* ============================================================
   導線3カード
   ============================================================ */
.entry{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2rem; margin-top:2.75rem;
}
.entry__item{
  background:#fafafa;
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  text-decoration:none;
  display:flex; flex-direction:column; align-items:center;
  padding:3.5rem 1.5rem 3rem;
  text-align:center;
  transition:box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.entry__icon-box{
  height:64px; display:flex; align-items:center; justify-content:center;
}
.entry__icon{ width:auto; height:100%; max-height:64px; }
.entry__ttl{
  display:block; width:100%; text-align:center;
  font-size:1.25rem; font-weight:400; margin-top:1.75rem; line-height:1.25;
}
.entry__en{ display:block; font-size:.75rem; margin-top:.15rem; color:var(--ink); }
@media (max-width:900px){
  .entry{ grid-template-columns:1fr; gap:.9rem; }
  .entry__item{
    flex-direction:row; align-items:center; justify-content:flex-start;
    text-align:left; gap:1.25rem; padding:1.6rem 1.5rem;
  }
  .entry__icon-box{ width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; }
  .entry__icon{ width:auto; height:auto; max-width:100%; max-height:100%; }
  .entry__ttl{ margin-top:0; display:flex; flex-direction:column; gap:.25rem; text-align:left; }
}

/* ============================================================
   セクション共通
   ============================================================ */
.sec{ margin-top:6rem; }
.sec__lead{
  font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:400; line-height:1.7;
}
.page-ttl{
  font-family:"Zen Old Mincho", serif;
  font-size:clamp(2rem, 4.2vw, 2.875rem); font-weight:400; line-height:1.5;
  letter-spacing:.02em;
}
@media (min-width:901px){
  .sec__lead{ font-size:clamp(1.625rem, 2.7vw, 2.125rem); line-height:1.5; }
  .company__ttl{ font-size:clamp(1.5rem, 2.5vw, 1.875rem); line-height:1.5; }
}
.sec__en{
  display:block; font-size:.8125rem; color:var(--ink-2);
  margin-bottom:.9rem;
}
.sec .cards{ margin-top:1.75rem; }
.sec__note{ margin-top:1.25rem; max-width:46em; color:var(--ink-2); font-weight:400; line-height:1.75; }
/* PCではセクションのリード文を折り返さない（幅の制限を外す） */
@media (min-width:901px){ .sec__note{ max-width:none; } }
.brk-pc{ display:none; }
@media (min-width:721px){ .brk-pc{ display:inline; } }

/* カード群（サービス・グループ共通） */
.cards{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2.5rem 2rem; margin-top:2.75rem;
}
.card__fig{ margin:0 0 1.4rem; border-radius:var(--r-md); overflow:hidden; }
.card__fig img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card__ttl{ font-size:1.5rem; font-weight:400; line-height:1.5; }
@media (min-width:901px){ .card__ttl{ font-size:1.375rem; } }
.card__en{ display:block; font-size:.6875rem; color:var(--ink-2); margin:.2rem 0 1rem; }
.card__body{ font-size:.9375rem; font-weight:400; line-height:1.75; letter-spacing:0; color:#333333; }
.card__body p + p{ margin-top:1.2em; }
@media (max-width:900px){
  .cards{ grid-template-columns:1fr; gap:2.75rem; }
  .card__body{ font-size:.875rem; line-height:1.65; }
}

/* 会社紹介（ダーク面） */
.company{
  margin-top:6rem;
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:#111111; color:#ffffff;
}
.company__media{ position:absolute; inset:0; }
.company__media img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.company__inner{ position:relative; padding:clamp(2.5rem, 6vw, 5rem); max-width:640px; }
.company__ttl{ font-size:clamp(1.375rem, 2.4vw, 1.75rem); font-weight:400; line-height:1.45; }
.company__body{ margin-top:1.5rem; line-height:1.75; font-size:.9375rem; }
.company__body p + p{ margin-top:1.3em; }
.btn{
  display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  font-size:1rem; font-weight:400; line-height:1;
  padding:1rem 2.5rem;
  border-radius:var(--r-sm); border:1px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:#f5f500; color:#111111; }
.btn-dark{ background:#111111; color:#f5f500; }
/* CTAブロック（黄色地）以外に置く黒ボタンは、文字色を背景色に合わせる */
.sec-cta .btn-dark{ color:#ffffff; }
.company .btn{ margin-top:2.25rem; }
/* ヘッダー・フッターのロゴはHOMEへのリンク（見た目は変えない） */
.topbar__home, .foot__home{ display:block; text-decoration:none; }
.foot__home{ width:fit-content; margin:0 auto; }
/* フォーム用のボタン配色 */
.btn-confirm{ background:#111111; color:#ffffff; }
.btn-send{ background:#111111; color:#ffffff; }
.btn-cancel{ background:#ebebe7; color:#111111; }
.btn-home{ background:#111111; color:#ffffff; }

/* CTA */
.cta{
  margin-top:6rem;
  background:#f5f500;
  border-radius:var(--r-xl);
  padding:clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 5vw, 3.5rem);
  display:flex; align-items:center; gap:clamp(1.5rem, 3vw, 2.5rem);
  text-align:left;
}
.cta__tag{
  flex:none;
  font-family:var(--f-en); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.875rem, 2.75vw, 2.625rem); line-height:1.2; letter-spacing:.06em;
  color:var(--ink);
}
.cta__divider{ flex:none; width:1px; align-self:stretch; background:#111111; opacity:.55; }
.cta__body{ flex:1 1 auto; min-width:0; }
/* CTAにボタンが2つ並ぶ場合 */
.cta__btns{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.cta__btns .btn{ margin-top:0; }
@media (max-width:720px){
  .cta__btns{ flex-direction:column; align-items:center; }
  .cta__btns .btn{ width:100%; max-width:300px; }
}
.cta h2{ font-size:clamp(1.5rem, 2.6vw, 1.8125rem); font-weight:400; margin:0; line-height:1.5; }
.cta p{ margin:.9rem 0 1.75rem; }
.cta .btn{ min-width:300px; }
.cta__btns .btn{ min-width:0; flex:1 1 auto; }
@media (max-width:720px){
  .cta{ flex-direction:column; align-items:flex-start; padding-top:3.25rem; padding-bottom:3.25rem; }
  .cta__tag{ font-size:2.125rem; }
  .cta__divider{ width:100%; height:1px; align-self:stretch; }
  /* CTA・会社概要・フォームのボタンは、スマホでは同じ幅で中央に揃える。
     会社概要ブロックだけ左右の余白が広く、同じ「%指定」では幅が揃わないため、
     余白をCTAと同値に合わせたうえで、最大幅を固定して揃えている。 */
  .company__inner{ padding-left:clamp(1.75rem, 5vw, 3.5rem); padding-right:clamp(1.75rem, 5vw, 3.5rem); }
  .cta .btn,
  .company .btn,
  #inquiry-form .btn,
  .f-actions .btn{
    min-width:0; width:100%; max-width:300px;
    display:block; margin-left:auto; margin-right:auto;
  }
}

/* フッター（コンテンツ末尾の会社情報） */
.foot{
  margin-top:0; padding-top:3.5rem;
  border-top:1px solid var(--hairline);
  text-align:center;
}
.inner--foot{ padding-bottom:3.5rem; }
.foot img{ height:56px; margin:0 auto 1.25rem; }
.foot address{
  font-style:normal; font-size:.875rem; font-weight:300; line-height:1.75; color:var(--ink-2);
}
.foot__line{ margin:0; }
.foot__seg{ white-space:nowrap; }
.brk-sp{ display:none; }
@media (max-width:720px){
  .foot__sep{ display:none; }
  .brk-sp{ display:inline; }
  .foot address{ font-size:.8125rem; }
}
.foot a{ text-decoration:none; color:inherit; }

/* ★2026-09-28 追加：業者エリア（/broker/）への入口（フッター側）。
   サイドバーにも同じ入口があるが、スマホではサイドバーがハンバーガーの中に
   隠れて見えないため、その代わりとしてフッターにも置いている。

   ★出す条件は2つ。両方を満たしたときだけ表示する。
     ① スマホ幅（900px以下）のときだけ　… PCはサイドバーに出ているので不要
     ② HOME と「お部屋を借りたい」のページだけ … 賃貸に関係するページに絞る
   ②の出し分けは、ビルド時に body へ付けている page-〇〇 クラスで行う
   （build_multipage.py。ページごとに page-home / page-rent … が入る）。

   ★既定は非表示なので、master.html を単体でブラウザに放り込んでも
     このボタンは出ない。出したいときは body に class="page-home" を付けて見る。 */
.foot__broker{ display:none; margin:2rem 0 0; }
@media (max-width:900px){
  body.page-home .foot__broker,
  body.page-rent .foot__broker{ display:block; }
}
.foot__broker-link{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.95rem 1.75rem;
  border:1px solid var(--hairline); border-radius:var(--r-sm);
  background:#f2f2f0;
  font-size:1rem; font-weight:400; color:var(--ink);
  text-decoration:none;
}
.foot__broker-link::after{ content:"▶"; font-size:.625rem; transform:scale(.9); }

/* ============================================================
   ページ切替（ハッシュルーティング）
   ============================================================ */
.view[hidden]{ display:none !important; }

/* ============================================================
   会社概要：情報テーブル
   ============================================================ */
.profile-table{ width:100%; border-collapse:collapse; margin-top:2.75rem; border-top:1px solid var(--hairline); }
.profile-table th, .profile-table td{
  text-align:left; padding:1rem 1rem 1rem 0;
  border-bottom:1px solid var(--hairline);
  font-weight:400; font-size:.9375rem; line-height:1.8;
}
.profile-table th{ width:230px; color:var(--ink-2); vertical-align:top; white-space:nowrap; }
.maplink{
  display:inline-block; margin-left:.5em;
  font-size:.8125rem; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:.3em;
}

/* 事務所写真スライド
   スマホ（720px以下）：1枚をフェードで切り替え（サイズ固定）
   PC（721px以上）    ：横移動のスライド。1200px以上で3枚、それ未満で2枚を並べて表示 */
.office-photos{
  position:relative; max-width:640px; aspect-ratio:4/3;
  margin-top:2.75rem; border-radius:var(--r-md); overflow:hidden;
}
.office-photos__track{ display:contents; }   /* スマホでは枠として機能させない */
.office-photos__ph{
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background:#f2f2f0; display:flex; align-items:center; justify-content:center;
  color:var(--ink-2); font-size:.8125rem;
}
.office-photos__ph.is-show{ opacity:1; }
.office-photos__ph img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (min-width:721px){
  .office-photos{ max-width:none; aspect-ratio:auto; border-radius:0; }
  .office-photos__track{
    display:flex; gap:1.5rem;
    transition:transform .5s ease;
  }
  .office-photos__ph{
    position:static; inset:auto; opacity:1; transition:none;
    flex:0 0 calc((100% - 1.5rem) / 2);       /* 2枚並び */
    aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden;
  }
}
@media (min-width:1200px){
  .office-photos__ph{ flex:0 0 calc((100% - 3rem) / 3); }   /* 3枚並び */
}

.office-photos__dots{
  display:flex; gap:.6rem; margin-top:1rem;
}
.office-photos__dots[hidden]{ display:none; }
.office-photos__dots button{
  width:36px; height:5px; border:0; border-radius:3px;
  background:#e0e0dd; cursor:pointer; padding:0;
}
.office-photos__dots button[aria-current="true"]{ background:#f5f500; }
.office-caption{ margin-top:1rem; font-size:.9375rem; font-weight:400; color:var(--ink-2); line-height:1.8; }
.tbd-flag{
  display:inline-block; margin-left:.6em;
  font-size:.6875rem; color:var(--ink-2);
  border:1px dashed var(--hairline); border-radius:4px;
  padding:.15em .6em; white-space:nowrap;
}
@media (max-width:640px){
  .profile-table, .profile-table tbody, .profile-table tr, .profile-table th, .profile-table td{
    display:block; width:100%;
  }
  .profile-table th{ padding:1rem 0 .25rem; border-bottom:0; white-space:normal; }
  .profile-table td{ padding:0 0 1rem; }
}

/* 代表ごあいさつ：スマホは本文の下に写真（正方形を丸くトリミング）
   PC（1180px以上）は本文の右に全身写真。
   ★2026-09-09：米田様の新しい写真に差し替え。あわせて
     ・wrap に上限幅を持たせ、画面を広げても写真が右へ離れていかないようにした
     ・写真の左右に余白を取った */
.message-wrap{ margin-top:2.75rem; }
.message-body{ max-width:42em; }
.message-photo{
  margin:2.5rem auto 0; max-width:220px;
  aspect-ratio:1/1; overflow:hidden; border-radius:50%;   /* スマホは丸 */
  background:#f2f2f0;
}
.message-photo img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center center;
}
.message-photo img.message-photo__pc{ display:none; }   /* PC用の全身写真はスマホでは出さない */
.message-body p{ font-size:1rem; font-weight:400; line-height:1.95; color:var(--ink); }
.message-body p + p{ margin-top:1.6em; }
@media (min-width:1180px){   /* ★2026-09-09：901px→1180px。901〜1179pxで本文が細くなるのを避けるため、
                                この幅未満は「本文の下に丸写真」のスマホ表示にする */
  .message-wrap{
    display:grid; grid-template-columns:minmax(0,1fr) 300px;
    gap:clamp(2rem, 4vw, 3.25rem); align-items:start;
    max-width:1024px;      /* ★本文42em(672px) + gap 52px + 写真300px。これ以上は横に広がらない */
  }
  .message-body{ margin-top:0; }
  .message-photo{
    margin:0; max-width:none;
    aspect-ratio:auto;            /* PCは切らずに全体を見せる */
    border-radius:0; background:transparent;
    overflow:visible;
    padding:0 clamp(.75rem, 1.5vw, 1.5rem);   /* ★写真の左右の余白 */
  }
  .message-photo img{ height:auto; object-fit:contain; object-position:center; }
  .message-photo img.message-photo__sp{ display:none; }    /* 丸写真はスマホ専用 */
  .message-photo img.message-photo__pc{ display:block; }
}

.message-sign{
  margin-top:2.75rem !important; padding-top:1.75rem;
  border-top:1px solid var(--hairline);
  font-size:.9375rem !important; line-height:1.9 !important;
  color:var(--ink-2);
}

.group-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1rem; margin-top:2rem;
}
.group-list li{
  background:#fafafa; border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:1.25rem 1.5rem; font-size:1rem;
}

/* ============================================================
   住まいの売買相談：フォーム
   ============================================================ */
.form{ max-width:640px; margin-top:2.75rem; }
@media (min-width:901px){ .form{ max-width:none; } }
.form-row{ margin-bottom:1.5rem; }
.form-row label{ display:block; font-size:.9375rem; font-weight:400; margin-bottom:.55rem; }
.req{
  display:inline-block; margin-left:.5em; vertical-align:middle;
  font-size:.6875rem; line-height:1.2; color:#ffffff; background:#111111;
  border-radius:4px; padding:.02em .55em .2em;
}
.form-row input, .form-row select, .form-row textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:#ffffff; border:1px solid var(--hairline); border-radius:var(--r-sm);
  padding:.85rem 1rem;
}
.form-row textarea{ resize:vertical; }
/* プルダウンの矢印を枠の端から少し内側に入れる（ブラウザ標準の位置だと端に寄りすぎるため） */
.form-row select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23111111' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px 8px;
  padding-right:2.75rem;
}
.form-row select::-ms-expand{ display:none; }
/* プルダウンは中身に対して広すぎないよう上限を設ける */
@media (min-width:901px){ .form-row select{ max-width:26em; } }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:1px solid #111111; outline-offset:-1px; border-color:#111111;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-check{
  display:flex; align-items:flex-start; gap:.65rem;
  margin-bottom:2.25rem; font-size:.9375rem; line-height:1.6;
}
.form-check input{ width:18px; height:18px; margin-top:.2rem; flex:none; }


/* ============================================================
   買取査定フォーム
   ============================================================ */
.as-lead{ margin-top:1.25rem; max-width:none; color:var(--ink-2); line-height:1.75; }
.as-steps{ display:flex; gap:.5rem; margin-top:2.25rem; list-style:none; padding:0; }
.as-steps li{
  flex:1 1 0; text-align:center; font-size:.9375rem; line-height:1.4; white-space:nowrap;
  padding:.7rem .4rem; background:#f7f7f5; border:1px solid #ebebe7; border-radius:var(--r-sm); color:var(--ink-2);
}
.as-steps li[aria-current="step"]{ background:#f5f500; border-color:#f5f500; color:#111111; }
.as-steps li span{ display:block; font-family:var(--f-en); font-size:.6875rem; letter-spacing:.1em; }
/* 「入力内容の確認」だけ文字数が多いため、幅を均等割りではなく文字量に応じて配分する
   （ご相談フォームの .fsteps と同じ扱い） */
.as-steps li{ white-space:nowrap; }
.as-steps li:nth-child(1){ flex:5 1 0; }
.as-steps li:nth-child(2){ flex:7 1 0; }
.as-steps li:nth-child(3){ flex:5 1 0; }
@media (max-width:640px){
  .as-steps{ gap:.35rem; }
  .as-steps li{ font-size:.8125rem; padding:.6rem .25rem; }
  .as-steps li span{ font-size:.625rem; }
}

.as-sec{ margin-top:2.75rem; }
.as-sec__ttl{
  display:flex; align-items:baseline; gap:.75rem;
  font-size:1.1875rem; font-weight:400; line-height:1.5;
  padding-bottom:.85rem; border-bottom:1px solid #111111; margin:0 0 1.75rem;
}
.as-sec__no{ font-family:var(--f-en); font-size:.75rem; font-weight:600; letter-spacing:.12em; color:var(--ink-2); }

.as-zip{ display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; }
.as-zip .form-row{ margin-bottom:0; flex:0 0 14em; }
.as-zip .btn{ padding:.85rem 1.35rem; font-size:.9375rem; margin-bottom:0; }
.as-zip__note{ flex:1 1 100%; margin:.6rem 0 0; font-size:.875rem; color:var(--ink-2); line-height:1.7; }
.as-zip__note.is-err{ color:#b30000; }

.as-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; }
.as-grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 1.5rem; }
@media (max-width:720px){ .as-grid2, .as-grid3{ grid-template-columns:1fr; } }

.fset{ border:0; padding:0; margin:0 0 1.5rem; }
.fset legend{ font-size:1rem; margin-bottom:.55rem; padding:0; }
.choices{ display:flex; flex-wrap:wrap; gap:.75rem; }
.choices label{
  display:flex; align-items:center; gap:.55rem; cursor:pointer; font-size:1rem; line-height:1.5;
  padding:.8rem 1.1rem; background:#ffffff; border:1px solid var(--hairline); border-radius:var(--r-sm);
}
.choices input{ width:18px; height:18px; flex:none; accent-color:#111111; }
@media (max-width:640px){ .choices{ flex-direction:column; } .choices label{ width:100%; } }

.f-err{ display:none; margin-top:.4rem; font-size:.9375rem; color:#b30000; }
.f-err.is-on{ display:block; }
.f-summary{
  display:none; margin-top:1.5rem; padding:1.1rem 1.25rem;
  background:#fff7f7; border:1px solid #b30000; border-radius:var(--r-sm);
  font-size:1rem; line-height:1.75; color:#b30000;
}
.f-summary.is-on{ display:block; }

.as-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }
@media (max-width:720px){
  .as-actions{ flex-direction:column; }
  .as-actions .btn{ width:100%; max-width:300px; margin-left:auto; margin-right:auto; }
}

.as-review{ margin-top:2rem; border-top:1px solid var(--hairline); }
.as-review div{ display:grid; grid-template-columns:13em 1fr; gap:0 1.5rem; padding:1.1rem 0; border-bottom:1px solid var(--hairline); }
.as-review dt{ font-size:.9375rem; color:var(--ink-2); line-height:1.75; }
.as-review dd{ margin:0; font-size:1rem; line-height:1.8; white-space:pre-wrap; }
@media (max-width:640px){ .as-review div{ grid-template-columns:1fr; gap:.25rem; padding:.9rem 0; } }

.as-done{ margin-top:2.25rem; padding:clamp(1.75rem, 3vw, 2.5rem); background:#ffffff; border:1px solid #ebebe7; border-radius:var(--r-xl); }
.as-done h2{ font-size:clamp(1.375rem, 2.6vw, 1.75rem); font-weight:700; margin:0 0 1rem; line-height:1.6; }
.as-done p{ margin:0; font-size:1rem; line-height:1.9; }
.as-done p + p{ margin-top:1em; }

.pp-link{ color:#111111; text-decoration:underline; text-underline-offset:.2em; }
button.pp-link{ font:inherit; background:#ffffff; border:0; padding:0; cursor:pointer; }

/* このフォーム内のプルダウンは、隣の入力欄と同じ幅にする（本体の26em上限を打ち消す） */
#as-form .form-row select{ max-width:none; }
/* 郵便番号の自動入力ボタン */
.btn-zip{ background:#6b6b6b; color:#ffffff; border-color:#6b6b6b; }


/* ============================================================
   ご相談フォーム（入力 → 確認 → 完了）
   ============================================================ */
.form-row label{ font-size:1rem; }
.form-check{ font-size:1rem; }
.form-note{ margin-top:.45rem; font-size:.9375rem; color:var(--ink-2); line-height:1.7; }

/* ステップ表示 */
.fsteps{ display:flex; gap:.5rem; margin-top:2.25rem; list-style:none; padding:0; }
/* 「入力内容の確認」だけ文字数が多いため、幅を均等割りではなく文字量に応じて配分する */
.fsteps li:nth-child(1){ flex:5 1 0; }
.fsteps li:nth-child(2){ flex:7 1 0; }
.fsteps li:nth-child(3){ flex:5 1 0; }
.fsteps li{ white-space:nowrap; }   /* 折り返さない */
.fsteps li{
  flex:1 1 0; text-align:center; font-size:.9375rem; line-height:1.4;
  padding:.7rem .4rem; background:#f7f7f5; border:1px solid #ebebe7;
  border-radius:var(--r-sm); color:var(--ink-2);
}
.fsteps li[aria-current="step"]{ background:#f5f500; border-color:#f5f500; color:#111111; }
.fsteps li span{ display:block; font-family:var(--f-en); font-size:.6875rem; letter-spacing:.1em; }
@media (max-width:640px){
  .fsteps{ gap:.35rem; }
  .fsteps li{ font-size:.8125rem; padding:.6rem .25rem; }
  .fsteps li span{ font-size:.625rem; }
}

/* 名前・フリガナの2列 */
.form-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; }
@media (max-width:640px){ .form-pair{ grid-template-columns:1fr; } }
/* メール／電話は画面が広いときだけ横並びにする */
.form-pair--wide{ grid-template-columns:1fr; }
@media (min-width:901px){ .form-pair--wide{ grid-template-columns:1fr 1fr; } }

/* ラジオ・チェックのグループ */
.fset{ border:0; padding:0; margin:0 0 1.5rem; }
.fset legend{ font-size:1rem; margin-bottom:.55rem; padding:0; }
.choices{ display:flex; flex-wrap:wrap; gap:.75rem; }
.choices label{
  display:flex; align-items:center; gap:.55rem; cursor:pointer;
  font-size:1rem; line-height:1.5; padding:.8rem 1.1rem;
  background:#ffffff; border:1px solid var(--hairline); border-radius:var(--r-sm);
}
.choices input{ width:18px; height:18px; flex:none; accent-color:#111111; }
.choices label:focus-within{ outline:2px solid #111111; }
@media (max-width:640px){ .choices{ flex-direction:column; } .choices label{ width:100%; } }

/* スパム対策用の入力欄。画面に出さず、支援技術にも読ませない（aria-hidden・tabindex="-1" とセット） */
.hp-wrap{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* エラー表示 */
.f-err{ display:none; margin-top:.4rem; font-size:.9375rem; line-height:1.6; color:#b30000; }
.f-err.is-on{ display:block; }
.f-summary{
  display:none; margin-top:1.5rem; padding:1.1rem 1.25rem;
  background:#fff7f7; border:1px solid #b30000; border-radius:var(--r-sm);
  font-size:1rem; line-height:1.75; color:#b30000;
}
.f-summary.is-on{ display:block; }

/* 確認画面 */
.f-review{ margin-top:2rem; border-top:1px solid var(--hairline); }
.f-review div{
  display:grid; grid-template-columns:12em 1fr; gap:0 1.5rem;
  padding:1.1rem 0; border-bottom:1px solid var(--hairline);
}
.f-review dt{ font-size:.9375rem; color:var(--ink-2); line-height:1.75; }
.f-review dd{ margin:0; font-size:1rem; line-height:1.8; white-space:pre-wrap; }
@media (max-width:640px){
  .f-review div{ grid-template-columns:1fr; gap:.25rem; padding:.9rem 0; }
}
.f-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; }
@media (max-width:640px){ .f-actions{ flex-direction:column; align-items:center; } }

/* プライバシーポリシーのモーダル */
.pp-link{ color:#111111; text-decoration:underline; text-underline-offset:.2em; }
button.pp-link{ font:inherit; background:#ffffff; border:0; padding:0; cursor:pointer; }
.pp-modal{
  width:min(760px, calc(100vw - 2rem)); max-height:min(80vh, 720px);
  padding:0; border:1px solid #ebebe7; border-radius:var(--r-md);
  background:#ffffff; color:var(--ink);
}
.pp-modal::backdrop{ background:rgba(17,17,17,.45); }
.pp-modal__hd{
  display:flex; align-items:center; gap:1rem;
  padding:1.25rem clamp(1.25rem, 3vw, 2rem);
  border-bottom:1px solid #ebebe7; background:#ffffff;
}
.pp-modal__hd h2{ font-size:1.25rem; font-weight:400; margin:0; line-height:1.5; }
.pp-modal__close{
  margin-left:auto; flex:none; width:40px; height:40px; cursor:pointer;
  background:#ffffff; border:1px solid var(--hairline); border-radius:var(--r-sm);
  font-size:1.125rem; line-height:1; color:var(--ink);
}
.pp-modal__bd{
  padding:clamp(1.25rem, 3vw, 2rem); overflow-y:auto;
  max-height:calc(min(80vh, 720px) - 76px); background:#ffffff;
}
.pp-body h3{ font-size:1.0625rem; font-weight:500; margin:1.75rem 0 .6rem; }
.pp-body h3:first-child{ margin-top:0; }
.pp-body p, .pp-body li{ font-size:1rem; line-height:1.9; }
.pp-body p + p{ margin-top:1em; }
.pp-body ul{ margin:.5rem 0 0; padding-left:1.2em; list-style:disc; }
.pp-body ul li{ margin-bottom:.35em; }
.pp-body .pp-date{ margin-top:2rem; font-size:.9375rem; color:var(--ink-2); }

/* 完了画面 */
.f-done{
  margin-top:2.25rem; padding:clamp(1.75rem, 3vw, 2.5rem);
  background:#ffffff; border:1px solid #ebebe7; border-radius:var(--r-xl);
}
.f-done h2{ font-size:clamp(1.375rem, 2.6vw, 1.75rem); font-weight:700; margin:0 0 1rem; line-height:1.6; }
.f-done p{ margin:0; font-size:1rem; line-height:1.9; }
.f-done p + p{ margin-top:1em; }

/* ============================================================
   お部屋を借りたい：近日公開の案内
   ============================================================ */
.rooms-notice{
  max-width:640px; margin-top:2.5rem;
  background:#fafafa; border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:clamp(1.75rem, 4vw, 2.75rem);
}
.rooms-notice__badge{
  display:inline-block; background:#f5f500; color:#111111;
  font-size:.75rem; font-weight:400;
  padding:.4em 1em; border-radius:99px; margin-bottom:1.4rem;
}
.rooms-notice p + p{ margin-top:0; }
.rooms-notice__body{ line-height:1.9; font-size:.9375rem; }


/* ============================================================
   売買専門ページ
   ============================================================ */
.guide p{ font-weight:400; }

/* 売買ページ ヒーロー（PC：左テキスト／右イラスト、SP：テキスト下にイラスト） */
.bs-hero{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(.5rem, 1vw, 1rem); align-items:center; }
.bs-hero__text{ min-width:0; }
.bs-hero__img{ min-width:0; }
.bs-hero__img img{ width:110%; max-width:none; height:auto; margin-left:-6%; }
@media (max-width:900px){ .bs-hero__img img{ width:100%; margin-left:0; } }
@media (max-width:900px){
  .bs-hero{ grid-template-columns:1fr; gap:1.25rem; }
  .bs-hero__img{ margin-top:.5rem; }
}
.anchor-target{ scroll-margin-top:calc(var(--tb-h) + 16px); }

.choice__note{ max-width:none; }
.choice{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem; margin-top:3.75rem; }
.choice__card{
  position:relative; text-align:center; background:#fafafa;
  border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:2.9rem 1.75rem 1.75rem; cursor:pointer; font:inherit; color:var(--ink);
  display:flex; flex-direction:column; align-items:center;
  transition:box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.choice__badge{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:61px; height:61px; border-radius:50%; background:#111111; color:#ffffff;
  display:flex; align-items:center; justify-content:center;
  font-size:2.125rem; font-weight:700; letter-spacing:.02em; line-height:1;
}
.choice__kind{ font-size:1rem; font-weight:500; }
.choice__ttl{
  width:100%; font-size:1.25rem; font-weight:400; line-height:1.5;
  margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--hairline);
}
.choice__desc{ font-size:.9375rem; font-weight:400; line-height:1.75; color:var(--ink-2); margin-top:.6rem; }
.choice__more{
  margin-top:1.5rem; padding:.7rem 2rem; border-radius:999px;
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  font-size:.875rem; font-weight:500; line-height:1;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}

.timing{
  display:flex; gap:1.75rem; align-items:flex-start;
  background:#fafafa; border-left:4px solid #f5f500; border-radius:0 var(--r-md) var(--r-md) 0;
  padding:1.5rem 1.75rem; margin-top:2.25rem;
}
.timing__num{ flex:none; display:flex; flex-direction:column; align-items:center; line-height:1; min-width:96px; }
.timing__num .en{ font-size:.6875rem; color:var(--ink-2); margin-bottom:.4rem; }
.timing__num strong{ font-family:var(--f-en); font-weight:700; font-size:3rem; position:relative; top:.05em; }
.timing__num span:last-child{ font-size:.875rem; font-weight:700; margin-top:.35rem; }
.timing__lead{ font-size:1.0625rem; font-weight:500; margin:0 0 .5rem; line-height:1.7; }
.timing__ul{ text-decoration:underline; text-underline-offset:.28em; text-decoration-thickness:1px; }
@media (min-width:901px){ .timing__lead{ font-size:1.1875rem; } }
.timing__body p{ margin:0; line-height:1.85; }
.timing__body p + p{ margin-top:.85em; }
.timing__note{ font-size:.875rem; color:var(--ink-2); }
.pattern-pill{
  display:inline-block; background:#111111; color:#ffffff;
  padding:.5rem 1.4rem; border-radius:999px;
  font-size:.8125rem; margin-bottom:1rem;
}

.pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem; margin-top:1.75rem; }
.pair__item{ border:1px solid var(--hairline); border-radius:var(--r-md); padding:1.5rem 1.75rem; }
.pair__item h3{ font-size:1.4375rem; font-weight:400; margin:0 0 .5rem; background:#f5f500; display:inline-block; padding:.2em .6em; }
.pair__sub{ margin:.15rem 0 .85rem; font-size:.875rem; color:var(--ink-2); }
.pair__item p:last-child{ margin:0; line-height:1.85; font-size:.9375rem; }

.steps-note{ margin-top:1.75rem; }
.steps-note h3{ font-size:1.125rem; font-weight:400; margin:0 0 .75rem; }
.mini-steps{ margin:0 0 1rem; padding:0; list-style:none; counter-reset:ms; }
.mini-steps li{ counter-increment:ms; position:relative; padding-left:2.25rem; line-height:1.8; margin-bottom:.4rem; font-weight:400; }
.mini-steps li::before{
  content:counter(ms); position:absolute; left:0; top:.35em;
  width:1.5rem; height:1.5rem; border-radius:50%; background:#f5f500;
  font-family:var(--f-en); font-size:.75rem; font-weight:600; line-height:1.5rem; text-align:center;
}
.steps-note p{ margin:0; line-height:1.85; color:var(--ink-2); }

.flow{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3rem; margin-top:2.5rem; }
.flow__col h3{ font-size:1.125rem; font-weight:400; margin:0 0 1.5rem; padding-bottom:.6rem; border-bottom:1px solid var(--hairline); }
.flow__list{ margin:0; padding:0; list-style:none; counter-reset:fl; }
.flow__list li{
  counter-increment:fl; position:relative;
  padding:0 0 1.5rem 3.4rem; min-height:2.2rem;
}
.flow__list li:last-child{ padding-bottom:0; }
/* 黒丸の番号 */
.flow__list li::before{
  content:counter(fl); position:absolute; left:0; top:0;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:#111111; color:#ffffff;
  font-family:var(--f-en); font-size:1rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
/* 丸と丸をつなぐ縦線 */
.flow__list li::after{
  content:""; position:absolute; left:calc(1.1rem - 1px); top:2.2rem; bottom:0;
  border-left:1px dashed #c9c9c5;
}
.flow__list li:last-child::after{ display:none; }
.flow__list strong{ display:block; font-weight:500; font-size:1.0625rem; line-height:1.5; padding-top:.2rem; }
.flow__list span{ display:block; font-size:.875rem; color:var(--ink-2); line-height:1.6; margin-top:.2rem; }

.prose{ max-width:42em; margin-top:1.75rem; }

/* 直接買取：比較表・箇条書き・締めくくり */
.compare{ margin-top:2.5rem; overflow-x:auto; }
.compare__table{ width:100%; border-collapse:collapse; min-width:640px; }
.compare__table th, .compare__table td{
  text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--hairline);
  font-weight:400; font-size:.9375rem; line-height:1.7; vertical-align:top;
}
.compare__table thead th{
  font-weight:500; font-size:1rem; border-bottom:1px solid var(--ink);
  background:#fafafa;
}
.compare__table tbody th{ width:11em; color:var(--ink-2); background:#fafafa; }
.compare__head{ width:11em; }
.compare__table .compare__hl{ background:#fdfdea; }
.compare__table thead th.compare__hl{ background:#f5f500; }

.tick-list{ margin:0; padding:0; list-style:none; }
.tick-list li{ position:relative; padding-left:1.5rem; line-height:1.85; font-size:.9375rem; margin-bottom:.6rem; }
.tick-list li:last-child{ margin-bottom:0; }
.tick-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--ink); font-size:.875rem;
}
.tick-list--minus li::before{ content:"−"; }

.closing{
  margin-top:2.5rem; padding:clamp(1.75rem, 3vw, 2.5rem);
  background:#f5f500; border-radius:var(--r-xl);
}
.closing__lead{
  font-size:clamp(1.25rem, 2.2vw, 1.4375rem); font-weight:700;
  margin:0 0 1rem; line-height:1.6;
}
.closing p{ margin:0; line-height:1.9; font-size:.9375rem; }
.closing p + p{ margin-top:1.1em; }

@media (max-width:720px){
  /* 横スクロールをやめ、1項目=1カードの縦積みに */
  .compare{ overflow-x:visible; }
  .compare__table{ display:block; min-width:0; }
  .compare__table thead{ display:none; }
  .compare__table tbody{ display:block; }
  .compare__table tr{
    display:block; border:1px solid var(--hairline); border-radius:var(--r-md);
    padding:1rem 1.1rem 1.1rem; margin-bottom:.9rem; background:#ffffff;
  }
  .compare__table tbody th{
    display:block; width:auto; background:transparent; padding:0 0 .6rem;
    border-bottom:1px solid var(--hairline); margin-bottom:.7rem;
    font-size:1rem; font-weight:500; color:var(--ink);
  }
  .compare__table td{
    display:block; border-bottom:none; padding:.45rem .7rem; font-size:.875rem;
    border-radius:4px;
  }
  .compare__table td::before{
    content:attr(data-label); display:block;
    font-size:.75rem; font-weight:500; color:var(--ink-2); margin-bottom:.15rem;
  }
  .compare__table td.compare__hl::before{ color:var(--ink); }
}
.valuation .prose{ max-width:none; }
.hl-white{ background:#ffffff; padding:.08em .12em; border-radius:2px; }
/* 単体セクションをグレーの器に入れる（Valuation／Screening 共通） */
.sec-grey{
  background:#f7f7f5; border:1px solid #ebebe7; border-radius:var(--r-xl);
  padding:clamp(2rem, 4vw, 3.25rem);
}
@media (max-width:720px){ .sec-grey{ padding:clamp(1.5rem, 5vw, 2rem); } }

/* 査定＋直接買取を1つのグレーの器でまとめる */
.group-grey{
  margin-top:6rem;
  background:#f7f7f5; border:1px solid #ebebe7; border-radius:var(--r-xl);
  padding:clamp(2rem, 4vw, 3.25rem);
}
.group-grey > .sec{ margin-top:0; }
.group-grey > .sec + .sec{ margin-top:4.5rem; }
/* 器の中の部品は白に起こし、グレーが「面」にならないようにする */
.group-grey .compare__table thead th:not(.compare__hl),
.group-grey .compare__table td:not(.compare__hl){ background:#ffffff; }
.group-grey .pair__item{ background:#ffffff; }
/* 直接買取のメリット／デメリット見出し：黄色地をやめ、太さはスマホと揃えて一段小さく */
.group-grey .pair__item h3{
  background:#ffffff; display:block; text-align:center; padding:0 0 .4rem;
  font-weight:700; font-size:1.25rem;
}
/* 器の内側は余白ぶん幅が減るため、比較表は横スクロールさせず折り返す */
.group-grey .compare{ overflow-x:visible; }
.group-grey .compare__table{ min-width:0; }
.group-grey .compare__table tbody th{ width:8.5em; }
@media (max-width:720px){
  .group-grey{ padding:clamp(1.5rem, 5vw, 2rem); }
  .group-grey > .sec + .sec{ margin-top:3.25rem; }
}
/* スマホのみ：直接買取のメリット／デメリット見出しは黄色地をやめて中央寄せ */
@media (max-width:720px){
  .group-grey .pair__item h3{
    background:#ffffff; display:block; text-align:center;
    padding:0 0 .4rem; font-weight:700; font-size:1.3125rem;
  }
}

.prose p{ line-height:1.95; }
.prose p + p{ margin-top:1.25em; }

.points{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2rem; margin-top:2.5rem; }
/* セクション末尾に置くボタン */
.sec-cta{ margin-top:2.25rem; }
.sec-cta--2{ display:flex; flex-wrap:wrap; gap:.75rem; }
@media (max-width:720px){
  .sec-cta .btn{ display:block; width:100%; max-width:300px; margin-left:auto; margin-right:auto; }
  .sec-cta--2{ flex-direction:column; align-items:center; }
}

.point__no{ display:block; font-size:2.25rem; font-weight:700; color:#111111; line-height:1; letter-spacing:-.04em; margin-bottom:.9rem; }
.point h3{ font-size:1.1875rem; font-weight:400; line-height:1.5; margin:0 0 .85rem; background:#f5f500; display:inline-block; padding:.2em .55em; }
/* 番号の右横に見出しを置く形（賃貸のCheck Pointsのみ。Our Approachには適用しない） */
.points--inline .point{ display:grid; grid-template-columns:auto 1fr; gap:0 .75rem; align-items:center; }
.points--inline .point__no{ display:inline; margin-bottom:0; }
.points--inline .point h3{ margin:0; justify-self:start; }
.points--inline .point .tick-list{ grid-column:1 / -1; margin-top:1.1rem; }
.point p{ margin:0; font-size:.9375rem; line-height:1.85; }

.faq{ margin-top:2rem; border-top:1px solid var(--hairline); }
.faq details{ border-bottom:1px solid var(--hairline); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 2.5rem 1.1rem 0; position:relative;
  font-weight:500; font-size:1rem; line-height:1.6;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"＋"; position:absolute; right:.25rem; top:1rem; font-family:var(--f-en); color:var(--ink-2);
}
.faq details[open] summary::after{ content:"－"; }
.faq details p{ margin:0 0 1.25rem; font-size:.9375rem; line-height:1.85; color:#333333; }

@media (max-width:900px){
  .choice, .pair, .flow, .points{ grid-template-columns:1fr; }
  .flow{ gap:2.5rem; }
  .choice{ gap:4rem; }
  .points{ gap:2.5rem; }
}
@media (max-width:720px){
  .timing{ flex-direction:column; gap:1rem; padding:1.25rem 1.25rem; }
  .timing__num{ flex-direction:row; align-items:baseline; gap:.5rem; min-width:0; }
  .timing__num .en{ margin-bottom:0; }
  .timing__num strong{ font-size:2.5rem; }
}

/* ============================================================
   賃貸ページ 追加部品
   ============================================================ */
.early{
  margin-top:1.75rem; padding:clamp(1.75rem, 3vw, 2.5rem);
  background:#f5f500; border-radius:var(--r-xl);
}
.early__badge{
  display:inline-block; background:#111111; color:#ffffff;
  padding:.4rem 1.1rem; border-radius:999px; font-size:.75rem; margin-bottom:1rem;
}
.early__ttl{ font-size:1.375rem; font-weight:400; line-height:1.5; margin:0 0 1rem; }
.early p{ margin:0; line-height:1.9; font-size:.9375rem; }
.early p + p{ margin-top:1em; }
.early strong{ font-weight:500; background:#ffffff; padding:.05em .25em; border-radius:2px; }

.flow--single{ grid-template-columns:minmax(0, 720px); }

.cost{ margin-top:2.25rem; }
.cost__list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--hairline); }
.cost__list li{
  display:flex; gap:1.25rem; align-items:flex-start;
  padding:1rem 0; border-bottom:1px solid var(--hairline);
}
.cost__no{ flex:none; font-size:1.375rem; font-weight:700; color:#111111; line-height:1.3; letter-spacing:-.04em; width:2.4rem; }
.cost__list strong{ display:block; font-weight:500; font-size:1.0625rem; line-height:1.5; }
.cost__list span:not(.cost__no){ display:block; font-size:.9375rem; color:var(--ink-2); line-height:1.75; margin-top:.15rem; }
.cost__total{
  margin:2rem 0 0; padding:clamp(1.25rem, 2.5vw, 1.75rem);
  background:#ffffff; border:1px dashed #111111; border-radius:var(--r-md);
  font-size:1.25rem; line-height:1.7;
}
.cost__total .cost__concl{
  display:block; font-family:var(--f-en); font-size:.75rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:.5rem;
}
.cost__total strong{ font-weight:500; font-size:1.5rem; background:#f5f500; padding:.1em .4em; }
.cost__total .cost__eg{ display:block; margin-top:.75rem; font-size:1rem; color:var(--ink-2); line-height:1.75; }
@media (max-width:720px){
  .cost__total{ font-size:1.125rem; }
  .cost__total strong{ font-size:1.3125rem; }
  .cost__total .cost__eg{ font-size:.9375rem; }
}

.prose__h3{ font-size:1.0625rem; font-weight:500; margin:1.75rem 0 .75rem; }
.prose__small{ font-size:.875rem; color:var(--ink-2); margin-top:1rem !important; }
.point .tick-list li{ font-size:.9375rem; }

@media (max-width:720px){
  .cost__list li{ gap:.9rem; }
  .cost__no{ font-size:1.125rem; width:2rem; }
}

/* スクロール表示 */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}


/* ============================================================
   マウスオーバー（ホバー）の見た目は、本当にホバーできる端末だけに適用する
   ------------------------------------------------------------
   スマホ・タブレットではホバーの指定を一切当てない。
   当てると「1回目のタップでホバー状態になり、2回目でようやく動く」
   という二度押しが起きるため。判定は画面幅ではなく入力手段で行う
   （PCでウィンドウを細くしただけの場合はホバーが効いたままになる）。
   ※ :focus-visible（キーボード操作の枠）はここに含めない。
   ============================================================ */
@media (hover: hover) and (pointer: fine){
  .nav-item:hover{ background:#f6f6f4; }
  .nav-portal:hover{ background:#111111; color:#ffffff; }
  /* ★2026-09-28 追加。大きさは変えず、色だけ変える */
  .foot__broker-link:hover{ background:#111111; color:#ffffff; border-color:#111111; }
  .entry__item:hover{ background:#ffffff; box-shadow:var(--shadow); transform:translateY(-2px); }
  .btn-primary:hover{ background:#111111; color:#ffffff; border-color:#ffffff; }
  .btn-dark:hover{ background:#f5f500; color:#111111; border-color:#111111; }
  /* ホバー：黄色地に黒文字、囲み線なし（線は透明にして大きさを変えない） */
  .sec-cta .btn-dark:hover{ background:#f5f500; color:#111111; border-color:transparent; }
  .btn-confirm:hover{ background:#f5f500; color:#111111; border-color:#f5f500; }
  .btn-send:hover{ background:#f5f500; color:#111111; border-color:#f5f500; }
  .btn-cancel:hover{ background:#d8d8d3; color:#111111; border-color:#d8d8d3; }
  .btn-home:hover{ background:#f5f500; color:#111111; border-color:#f5f500; }
  .foot a:hover{ text-decoration:underline; }
  .maplink:hover{ color:var(--ink); }
  .btn-zip:hover{ background:#111111; color:#ffffff; border-color:#111111; }
  button.pp-link:hover{ text-decoration-thickness:2px; }
  .pp-modal__close:hover{ background:#f2f2f0; }
  .choice__card:hover{ background:#ffffff; box-shadow:var(--shadow); transform:translateY(-2px); }
  .choice__card:hover .choice__more{ background:#f5f500; color:var(--ink); border-color:#f5f500; }
}