/*
Theme Name: GR Estate
Theme URI: https://estate.gr-gp.jp/
Description: ジーアール不動産（熊本）のオリジナルテーマ。STUDIO版を完全再現したクリーンHTMLから移植。
Author: 合同会社種火
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: gr-estate
*/

@charset "UTF-8";
/* ============================================================
   ジーアール不動産 — クリーンHTML
   出典: STUDIO版 https://estate.gr-gp.jp/ の実測（2026-10-07）
   トークンは docs/brand-tokens.md と1:1で対応させること
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* color */
  --color-main:#AC994F;          /* ゴールド（CTA・フッター・強調） */
  --color-accent:#B5A361;        /* 淡ゴールド（ヘッダーCTA文字） */
  --color-check:#A69A70;         /* サービス箇条書きのチェック */
  --icon-instagram:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M224.1%20141c-63.6%200-114.9%2051.3-114.9%20114.9s51.3%20114.9%20114.9%20114.9S339%20319.5%20339%20255.9%20287.7%20141%20224.1%20141zm0%20189.6c-41.1%200-74.7-33.5-74.7-74.7s33.5-74.7%2074.7-74.7%2074.7%2033.5%2074.7%2074.7-33.6%2074.7-74.7%2074.7zm146.4-194.3c0%2014.9-12%2026.8-26.8%2026.8-14.9%200-26.8-12-26.8-26.8s12-26.8%2026.8-26.8%2026.8%2012%2026.8%2026.8zm76.1%2027.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9%200-35.8%201.7-67.6%209.9-93.9%2036.1s-34.4%2058-36.2%2093.9c-2.1%2037-2.1%20147.9%200%20184.9%201.7%2035.9%209.9%2067.7%2036.2%2093.9s58%2034.4%2093.9%2036.2c37%202.1%20147.9%202.1%20184.9%200%2035.9-1.7%2067.7-9.9%2093.9-36.2%2026.2-26.2%2034.4-58%2036.2-93.9%202.1-37%202.1-147.8%200-184.8zM398.8%20388c-7.8%2019.6-22.9%2034.7-42.6%2042.6-29.5%2011.7-99.5%209-132.1%209s-102.7%202.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7%209-132.1c7.8-19.6%2022.9-34.7%2042.6-42.6%2029.5-11.7%2099.5-9%20132.1-9s102.7-2.6%20132.1%209c19.6%207.8%2034.7%2022.9%2042.6%2042.6%2011.7%2029.5%209%2099.5%209%20132.1s2.7%20102.7-9%20132.1z%22%2F%3E%3C%2Fsvg%3E");
  --icon-square-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M64%2032C28.7%2032%200%2060.7%200%2096V416c0%2035.3%2028.7%2064%2064%2064H384c35.3%200%2064-28.7%2064-64V96c0-35.3-28.7-64-64-64H64zM337%20209L209%20337c-9.4%209.4-24.6%209.4-33.9%200l-64-64c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200l47%2047L303%20175c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9z%22%2F%3E%3C%2Fsvg%3E");
  --color-ink:#222222;           /* 本文 */
  --color-ink-sub:#666666;       /* 補足 */
  --color-bg:#FFFFFF;
  --color-bg-sub:#FCFAF3;        /* ヘッダー地 */
  --color-bg-sub2:#FFFDF6;       /* 枠線ボタン地 */
  --color-border:#F0EEE7;
  /* 下層ページ系（STUDIOで別パレットが使われている。実測値を保持） */
  --color-ink-deep:#1E2939;      /* 下層見出し */
  --color-ink-body:#4A5565;      /* 下層本文 */
  --color-ink-mid:#364153;
  --color-ink-mute:#6A7282;
  --color-ink-slate:#333333;
  /* type */
  --font-jp:"Noto Sans JP",sans-serif;
  /* 原本の和文フォールバックは html{font-family:"Hiragino Kaku Gothic ProN"}。
     字幅を合わせるため同じ順で指定し、Hiraginoが無い環境は Noto Sans JP に落とす */
  --font-en:"Lato","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  /* 下層ページはSTUDIO上で汎用sans指定（実測 Arial系フォールバック）。
     実機の見えに合わせ Hiragino → Noto の順でフォールバックさせる */
  --font-sub:"Arimo",Arial,Helvetica,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  /* layout */
  --container-max:1200px;
  --gutter:40px;
  --radius:8px;
  --radius-pill:999px;
  --header-h:117px;
}

/* 原本は一部のテキストにだけ font-feature-settings:"palt" が掛かっている（実測）。
   和文の字幅が変わるため、掛かっている要素だけに同じ指定をする */
.gnav__list a,.header-cta,.btn-outline,.service__name,.service__desc,
.service__points li,.promise__title,.btn-primary,.fnav__list a,.site-footer__bottom{
  font-feature-settings:"palt";
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-bg);color:var(--color-ink);
  font-family:var(--font-en);font-size:15px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,figure{margin:0}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--color-main);outline-offset:2px}

/* 元サイト実測: コンテンツ幅1200pxを中央寄せ（内側パディングなし＝1280px時 x40〜1240） */
.container{width:min(var(--container-max),100% - var(--gutter) * 2);margin-inline:auto}
.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}

/* ============================================================
   header
   ============================================================ */
.site-header{background:var(--color-bg-sub);padding:16px 40px}
.site-header__inner{
  max-width:var(--container-max);margin-inline:auto;
  min-height:85px;background:#fff;border-radius:var(--radius-pill);
  display:flex;align-items:center;gap:24px;padding:16px 16px 16px 32px;
}
.site-header__logo{flex:0 0 auto}
.site-header__logo img{width:271px;height:auto}
.gnav{flex:1 1 auto}
.gnav__list{display:flex;align-items:center;justify-content:center;gap:24px;height:35px}
.gnav__list a{display:block;font-size:15px;line-height:26.25px;color:var(--color-ink);white-space:nowrap}
.gnav__list a:hover{color:var(--color-main)}
.mnav__list{display:none}
.mnav__en{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--color-accent)}
.mnav__ja{display:block;font-size:15px;color:var(--color-ink)}
/* 右端の「Instagram丸ボタン + お問い合わせピル」= 実測 50 + 12 + 188 = 250px */
.header-actions{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.header-ig{
  width:50px;height:50px;border-radius:50%;background:var(--color-accent);
  display:inline-flex;align-items:center;justify-content:center;
}
.header-ig::before{
  content:"";width:16px;height:18px;background:var(--color-ink);
  -webkit-mask:var(--icon-instagram) center/contain no-repeat;
          mask:var(--icon-instagram) center/contain no-repeat;
}
.header-cta{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:16px;
  padding:12px 32px;
  background:var(--color-border);border:1px solid var(--color-accent);
  border-radius:var(--radius-pill);
  color:var(--color-accent);font-size:15px;line-height:26.25px;font-weight:900;
  letter-spacing:-.3px;white-space:nowrap;
}
.header-cta:hover{background:#fff}
.header-cta .mi{font-size:20px}

/* 下層ページのヘッダー（元サイト実測: 高さ85px / ロゴ x32 / 白地・角丸なし）
   トップだけが「クリーム地に白い角丸パネル」の別デザインになっている */
.site-header--sub{background:#fff;padding:0}
.site-header--sub .site-header__inner{
  max-width:none;background:#fff;
  min-height:85px;padding:16px 16px 16px 32px;
}

/* ハンバーガー（<1024px） */
.nav-toggle{display:none;width:44px;height:44px;flex:0 0 auto;margin-left:auto;
  align-items:center;justify-content:center;border-radius:50%}
.nav-toggle .mi{font-size:28px;color:var(--color-ink)}

/* Material Symbols */
.mi{font-family:"Material Symbols Outlined";font-weight:400;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;
  direction:ltr;-webkit-font-feature-settings:"liga";font-variation-settings:"opsz" 20;}

/* ============================================================
   footer
   ============================================================ */
.site-footer{background:var(--color-main);padding:64px 0 0}
/* トップだけ「まずは無料相談」ボタンの下に余白が入る */
.home .site-footer{margin-top:109px}
.site-footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.site-footer__logo img{width:267px;height:auto}
/* 原本はナビ右端がコンテンツ右端より12px内側にある */
.fnav__list{display:flex;gap:28px;flex-wrap:wrap;padding:4px 12px 0 0}
.fnav__list a{font-size:15px;line-height:26.25px;font-weight:700;color:var(--color-ink)}
.fnav__list a:hover{color:#fff}
.site-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:49px 0 24px;font-size:12px;line-height:16.8px;color:var(--color-ink-sub);
}
.site-footer__legal{display:flex;gap:24px}
.site-footer__legal a:hover{text-decoration:underline}

/* ============================================================
   home / hero
   ============================================================ */
.hero-home{
  height:720px;
  background-image:url("assets/img/hero-home.webp");
  background-repeat:no-repeat;background-position:50% 50%;background-size:100% auto;
  position:relative;
}
.hero-home__actions{
  position:absolute;right:104px;bottom:90px;display:flex;gap:16px;
}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;
  background:var(--color-bg-sub2);border:1px solid var(--color-main);border-radius:6px;
  color:var(--color-main);font-size:16px;line-height:28px;font-weight:700;white-space:nowrap;
}
.btn-outline .mi{font-size:20px}
.btn-outline:hover{background:var(--color-main);color:#fff}

/* intro */
.intro{padding:80px 0 0;text-align:center}
/* 実測: 幅981px・高さ88pxの箱に 28px/48px の1行を上下中央 */
.intro__title{
  max-width:981px;margin-inline:auto;min-height:88px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-jp);font-size:28px;font-weight:700;line-height:48px;
  color:var(--color-ink-deep);
}
/* 実測: 本文ブロック y1041・幅1180px・20px/35px。
   原本は先頭に空行2つ分（70px）のリードがあるため margin-top は 36+70=106px */
.intro__body{
  max-width:1180px;margin:98px auto 0;
  font-family:var(--font-jp);font-size:20px;font-weight:400;
  line-height:35px;color:#4B5563;
}
.intro__body p + p{margin-top:35px}
/* 原本では3文目が2行に折り返しており、3文目と4文目の間だけ空行が入っていない */
.intro__body p:nth-of-type(3) + p{margin-top:0}

/* ---------- point（ジーアールはここが違う！） ---------- */
.point{padding:327px 0 84px}
/* 原本では見出しが中央から右に70pxずれている（STUDIO側の配置ずれ。docs/audit.md 参照） */
.point__lead{margin-left:140px;text-align:center;font-size:19px;line-height:35px;font-weight:500;color:#4B5563}
/* 実測: 980px幅を中央寄せ（左カラム529 + 69 + カード382） */
.point__grid{
  margin-top:5px;width:980px;max-width:100%;margin-inline:auto;
  display:grid;grid-template-columns:529px 382px;column-gap:69px;align-items:start;
}
.point__cols{display:grid;grid-template-columns:repeat(3,1fr);column-gap:11px}
.point__col{text-align:center}
.point__num{width:35px;height:auto;margin:0 auto}
/* 3列の写真の高さを揃えるため2行分（43px）の高さを確保し、1行の場合は上下中央に置く
   （原本も1行の見出しだけ 1841px、2行の見出しは 1831px から始まる） */
.point__label{
  margin-top:20px;min-height:43px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;line-height:22px;letter-spacing:2px;color:#111;
}
.point__photo{width:116px;height:116px;margin:34px auto 0;object-fit:cover}
.point__card{
  background:var(--color-main);border-radius:9px;padding:25px 20px;color:#fff;
}
.point__card-title{width:165px;margin:0 auto}
.point__list{margin-top:45px;display:grid;gap:10px}
.point__list li{display:grid;grid-template-columns:30px 1fr;align-items:start;column-gap:5px;padding:3px 0 4px}
.point__list img{width:30px;height:auto}
/* 実測: 1項目=22px（上3px + 15px + 下4px）・項目間10px */
.point__list span{font-size:13px;font-weight:500;line-height:15px}

/* ---------- service ---------- */
.service{padding:145px 0 0;text-align:center}
.service__title{font-family:var(--font-jp);font-size:24px;font-weight:600;line-height:33.6px;color:var(--color-ink)}
/* 実測: 上下に20pxの余白を持つ1行ブロック（高さ62.4px） */
.service__lead{max-width:894px;margin:12px auto 0;padding:20px 0;
  font-family:var(--font-jp);font-size:16px;line-height:22.4px;color:var(--color-ink)}
/* 元サイト実測（STUDIO原本をローカル再生して計測・2026-10-07）
   行: display:flex / align-items:center / 画像378px + 間234px + 本文
   行間: 行のpadding-bottom 40px + リストgap 40px = 80px
   見出し 24px/36px → 16px → 本文 15px/26.25px(1.75) → 0px → 箇条書き */
/* 行間83px = 原本の「行のpadding-bottom 40px + リストgap 40px + 行ボックスの余り3px」 */
.service__rows{margin-top:63px;display:grid;gap:83px;text-align:left}
/* 原本は行ごとに左右の位置が揃っていない（STUDIO側の配置ずれ。docs/audit.md 参照）。
   実測値: 行1 画像x44/本文x656、行2 本文x124/画像x778、行3 画像x61/本文x664 */
.service__row{display:grid;align-items:center}
.service__row:nth-child(1){grid-template-columns:378px 387px;column-gap:234px;margin-left:4px}
.service__row:nth-child(2){grid-template-columns:307px 378px;column-gap:347px;margin-left:84px}
.service__row:nth-child(3){grid-template-columns:378px 369px;column-gap:225px;margin-left:21px}
.service__row--reverse .service__figure{order:2}
.service__figure img{width:378px;border-radius:var(--radius)}
.service__name{font-family:var(--font-jp);font-size:24px;font-weight:700;line-height:1.5;color:var(--color-ink)}
.service__desc{margin-top:16px;font-size:15px;line-height:1.75;color:var(--color-ink)}
/* 元サイトは行ごとに本文幅が違う（387 / 307 / 369px）。折り返し行数を合わせる */
.service__row:nth-child(1) .service__desc{max-width:387px}
.service__row:nth-child(2) .service__desc{max-width:307px}
.service__row:nth-child(3) .service__desc{max-width:369px}
/* 箇条書き: 1項目=上8px + 本文12px/16.8px + 下9px = 33.8px、項目間の余白なし */
.service__points{margin-top:0;display:grid;gap:0;max-width:375px}
.service__points li{position:relative;padding:8px 0 9px 22px;
  font-size:12px;line-height:1.4;color:var(--color-ink)}
.service__points li::before{
  /* 元サイトは Font Awesome の fa-square-check（#A69A70）。
     外部フォント依存を増やさないため同形のSVGに置き換えている */
  content:"";position:absolute;left:0;top:8px;width:14px;height:16px;
  background:var(--color-check);
  -webkit-mask:var(--icon-square-check) center/14px 14px no-repeat;
          mask:var(--icon-square-check) center/14px 14px no-repeat;
}

/* ---------- area carousel ---------- */
.area{padding:263px 0 0;overflow:hidden}
.area__track{display:flex;gap:79px;width:max-content;animation:area-marquee 42s linear infinite}
.area:hover .area__track,.area__track:focus-within{animation-play-state:paused}
@keyframes area-marquee{from{transform:translateX(0)}to{transform:translateX(-1707px)}}
@media (prefers-reduced-motion:reduce){
  .area__track{animation:none}
  .area{overflow-x:auto;scroll-snap-type:x mandatory}
  .area__item{scroll-snap-align:center}
}
.area__item{flex:0 0 490px;text-align:left}
.area__item img{width:490px;height:366px;object-fit:cover;border-radius:var(--radius)}
.area__name{margin-top:16px;font-size:20px;line-height:30px;font-weight:700;color:var(--color-ink)}
.area__item button{display:block;width:100%;text-align:left}
.area__item button:hover img{opacity:.88;transition:opacity .2s}

/* エリア詳細モーダル */
.area-dialog{
  width:min(720px,calc(100vw - 32px));border:0;border-radius:16px;padding:0;
  color:var(--color-ink);
}
.area-dialog::backdrop{background:rgba(0,0,0,.45)}
.area-dialog__inner{padding:32px}
.area-dialog__title{font-family:var(--font-jp);font-size:22px;font-weight:700}
.area-dialog__desc{margin-top:16px;font-size:15px;line-height:2}
.area-dialog__list{margin-top:24px;display:grid;gap:20px}
.area-dialog__list dt{font-family:var(--font-jp);font-size:16px;font-weight:700;color:var(--color-main)}
.area-dialog__list dd{margin:6px 0 0;font-size:14px;line-height:1.9}
.area-dialog__close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--color-border);
}

/* ---------- promise ---------- */
.promise{padding:188px 0 0;text-align:center}
.promise__title{font-family:var(--font-jp);font-size:24px;line-height:33.6px;font-weight:700;color:var(--color-ink)}
.promise__lead{margin-top:16px;font-size:15px;line-height:26.25px;color:var(--color-ink-sub)}
/* 実測: 1200px幅・padding 32/32/52・角丸24 */
.promise__card{
  margin-top:46px;background:#fff;border-radius:24px;box-shadow:0 2px 24px rgba(0,0,0,.06);
  padding:32px 32px 52px;text-align:left;
}
.promise__person{display:flex;align-items:center;gap:16px}
.promise__person > div{display:flex;flex-direction:column;gap:4px}
.promise__person img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.promise__name{font-size:16px;line-height:24px;font-weight:500;color:var(--color-ink-deep)}
.promise__role{font-size:16px;line-height:24px;font-weight:500;color:#6B7280}
.promise__msg{max-width:1023px;margin-top:28px;padding:8px 0;font-size:16px;font-weight:500;line-height:24px;color:#4B5563}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;min-height:52px;margin-top:84px;
  background:var(--color-main);border-radius:6px;color:#fff;
  font-size:15px;line-height:26.25px;font-weight:700;
}
.btn-primary .mi{font-size:20px}
.btn-primary:hover{background:#9a8845}

/* ============================================================
   下層ページ共通
   ============================================================ */
/* ※STUDIO版は見出しも本文も一律 16px/400（Arimo系）で、タイポの階層が無い。
   「完全再現」方針のためそのまま踏襲している。階層を付ける場合は
   .page-hero__title / .sub-section__title の font-size を上げるだけでよい。
   詳細は docs/audit.md の「タイポグラフィ」参照。 */
.page-hero{
  position:relative;text-align:center;
  padding:96px 40px 0;min-height:490px;
  background-image:var(--hero);
  background-repeat:no-repeat;background-position:50% 50%;background-size:cover;
  font-family:var(--font-sub);
}
/* buy: 背景を 100% auto で上端に敷き、写真の帯の上に文字を載せる（実測どおり） */
.page-hero--band{
  background-size:100% auto;background-position:50% 0;
  min-height:0;padding-bottom:0;
}
/* 物件検索ページだけ上の余白が狭い（実測: 見出し y152） */
.page-hero--research{padding-top:64px;padding-bottom:0;min-height:0}
.page-hero__inner{position:relative;z-index:1}
/* 実測: 見出し 16/24（Noto Sans JP）→8px→ タイトル 16/24 →73px→ リード 16/26（行間0） */
.page-hero__eyebrow{font-size:16px;line-height:24px;letter-spacing:1px;font-family:var(--font-jp);color:#fff}
.page-hero__title{margin-top:8px;font-size:16px;font-weight:400;line-height:24px;color:#fff}
.page-hero__lead{margin-top:0;font-size:16px;line-height:26px;color:rgba(255,255,255,.95)}
/* eyebrow も <p> のため :first-of-type では当たらない。隣接セレクタで指定する */
.page-hero__title + .page-hero__lead{margin-top:73px}
.page-hero__cta{
  /* 実測: リード下端(362) →51px→ ボタン上端(413)。ボタン 298×66 / 文字 16/24 */
  margin-top:51px;display:inline-flex;align-items:center;gap:17px;
  padding:21px 46px;background:#fff;border-radius:var(--radius-pill);
  color:var(--color-main);font-size:16px;font-weight:400;line-height:24px;
}
.page-hero__cta:hover{background:var(--color-bg-sub2)}
.page-hero__cta img{width:24px;height:24px}

.sub{font-family:var(--font-sub);color:var(--color-ink-body)}
.sub-section{padding:80px 0}
/* 実測の背景色（STUDIOはセクションごとに地色を変えている） */
.sub-section--value{background:#FCFAF2}
.sub-section--flow{background:#fff}
/* ページ個別の余白（STUDIO側でページごとに揃っていないため実測値を当てている） */
.sub-section--support{padding:80px 0 176px}
.pg-sell .sub-section--value{padding-bottom:112px}
/* 元サイトのテナントはフッターがセクションの内側に入っていて、上に64pxの余白がある */
.pg-tenant .site-footer{margin-top:64px}
/* 査定方法セクションは下の余白が広く、カードも左寄せ（元サイト実測） */
.sub-section--assess{padding-bottom:140px}
.sub-section--assess .card-grid{justify-content:start}
.pg-tenant .sub-section:not(.sub-section--support){padding-bottom:144px}
.sub-section__title{text-align:center;font-size:16px;font-weight:400;line-height:24px;color:var(--color-ink-body)}
.sub-section__lead{margin-top:24px;text-align:center;font-size:16px;line-height:26px;color:var(--color-ink-body)}

/* 2カラムの価値訴求
   実測: カード 592px（2列 gap16）・padding 32/32/3・角丸16・影 0 1px 2px -1px rgba(0,0,0,.1)
         アイコンは幅64pxの枠に中央寄せで16px下げ、本文は見出しより16px内側 */
.value-grid{margin-top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.value-card{
  padding:32px 32px 3px;border-radius:16px;background:#fff;
  box-shadow:0 1px 2px -1px rgba(0,0,0,.1);
}
.value-card__row{display:flex;align-items:flex-start;gap:16px}
.value-card__iconwrap{
  flex:0 0 64px;height:64px;border-radius:50%;background:var(--color-main);
  display:flex;justify-content:center;padding:16px 16px 0;
}
.value-card__icon{width:32px;height:32px}
.value-card__text{flex:1 1 auto;min-width:0}
.value-card__title{font-size:16px;font-weight:400;line-height:24px;color:var(--color-ink-deep)}
.value-card__body{margin-top:13px;padding:0 16px;font-size:16px;line-height:26px;color:var(--color-ink-body)}
.value-card__body p + p{margin-top:1em}

/* フロー（アコーディオン）
   実測: 幅800pxを中央寄せ・1項目44px・間隔16px・角丸4px・内側1pxの枠線
         丸番号40px（#AC994F）は左24px、見出しはさらに16px右 */
.flow{width:800px;max-width:100%;margin:64px auto 0;display:grid;gap:16px}
.flow__item{background:#fff;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.flow__summary{
  display:flex;align-items:center;gap:16px;height:44px;padding:0 12px 0 24px;
  cursor:pointer;list-style:none;
}
.flow__summary::-webkit-details-marker{display:none}
.flow__no{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:var(--color-main);
  color:#fff;font-size:16px;font-weight:400;line-height:24px;
}
.flow__name{flex:1 1 auto;font-size:16px;font-weight:400;line-height:24px;color:var(--color-ink-deep)}
.flow__summary .mi{flex:0 0 auto;font-size:24px;color:var(--color-ink-slate);transition:transform .2s}
.flow__item[open] .flow__summary .mi{transform:rotate(180deg)}
.flow__body{padding:0 12px 12px;font-size:14px;line-height:19.6px;color:var(--color-ink-slate)}

/* 3カラムカード（査定方法 / サポート体制）
   実測: 369px × 3・間隔32px・padding 32・角丸16・内側の間隔24px
         アイコンは72pxの丸（通常 #FCFAF2 / おすすめ #AC994F）、中のアイコンは40px */
.card-grid{margin-top:64px;display:grid;grid-template-columns:repeat(3,369px);justify-content:center;gap:32px}
.note + .card-grid{margin-top:64px}
.card{
  position:relative;border:0;border-radius:16px;padding:32px;background:#fff;
  display:flex;flex-direction:column;align-items:center;
}
.card__iconwrap{
  width:72px;height:72px;border-radius:50%;background:var(--color-bg-sub);
  display:flex;justify-content:center;padding:16px 16px 0;
}
.card--recommended .card__iconwrap{background:var(--color-main)}
.card__icon{width:40px;height:40px}
.card__title{margin-top:24px;text-align:center;font-size:16px;font-weight:400;line-height:24px;color:var(--color-ink-deep)}
.card__sub{margin-top:12px;text-align:center;font-size:16px;line-height:24px;color:var(--color-ink-mute)}
.card__body{margin-top:24px;align-self:stretch;font-size:16px;line-height:26px;color:var(--color-ink-body)}
/* 見出しのすぐ下に本文が来る場合（テナント）は詰める */
.card__title + .card__body{margin-top:14px}
.card__recommend{
  margin-top:24px;text-align:center;
  color:var(--color-main);font-size:16px;line-height:24px;
}
.note{margin-top:32px;text-align:center;font-size:16px;line-height:24px;color:var(--color-ink-body)}

/* 物件カード（buy） */
.property-grid{margin-top:72px;display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.property{border:1px solid var(--color-border);border-radius:12px;padding:24px;text-align:center}
.property__name{font-size:15px;color:var(--color-ink-slate)}
.property__row{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:15px;color:var(--color-ink-slate)}
.property__row .mi{font-size:24px}

/* テナント: リード箱と写真2枚（実測: 箱 padding 48/40・地色#FCFAF2・角丸16、写真 481×300・間隔80px） */
.photo-pair{margin-top:64px;padding:0 64px;display:grid;grid-template-columns:repeat(2,1fr);gap:80px}
.photo-pair img{width:100%;height:300px;object-fit:cover;border-radius:16px}
.feature-lead{
  margin-top:64px;padding:48px 40px;background:var(--color-bg-sub);border-radius:16px;text-align:center;
}
.feature-lead__icon{width:48px;height:48px;margin:0 auto}
.feature-lead__title{margin-top:24px;font-size:16px;font-weight:400;line-height:24px;color:var(--color-ink-deep)}
.feature-lead__body{margin-top:16px;font-size:16px;line-height:26px;color:var(--color-ink-body)}

/* 物件検索の埋め込み */
.research-embed{padding:40px 0 80px}
.research-embed__frame{width:100%;height:1300px;border:0;border-radius:12px;background:#fff}

/* 共通CTA
   実測: セクション padding 80/40・地色 #FCFAF2、カードは 400px 幅の白ベタ（枠線なし） */
.cta{padding:80px 0 72px;background:#FCFAF2;text-align:center;font-family:var(--font-sub)}
.cta__title{font-size:16px;font-weight:400;line-height:24px;color:var(--color-ink-deep)}
.cta__hours{margin-top:16px;font-size:16px;line-height:24px;color:var(--color-ink-body)}
.cta__card{
  display:block;width:400px;max-width:100%;margin:48px auto 0;padding:36px 0 28px;
  border:0;border-radius:0;background:#fff;
}
.cta__card img{width:40px;height:40px;margin:0 auto}
.cta__card-title{margin-top:16px;font-size:16px;font-weight:400;line-height:24px;color:var(--color-ink-deep)}
.cta__card-sub{margin-top:16px;font-size:16px;line-height:24px;color:var(--color-ink-body)}
.cta__other{margin-top:32px;font-size:16px;line-height:24px;color:var(--color-ink-body)}
.cta__contact{margin-top:8px;display:grid;gap:8px;font-size:16px;line-height:24px;color:var(--color-ink-mid)}
.cta__contact a:hover{text-decoration:underline}

/* 準備中ページ */
.stub{padding:120px 0;text-align:center;font-family:var(--font-sub)}
.stub__title{font-size:16px;font-weight:400;color:var(--color-ink-deep)}
.stub__body{margin-top:20px;font-size:16px;line-height:1.9;color:var(--color-ink-body)}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1023px){
  :root{--gutter:20px}
  .site-header__inner{padding:0 12px 0 20px;min-height:72px;gap:12px;position:relative}
  .site-header__logo img{width:200px}
  .nav-toggle{display:inline-flex}
  .gnav{
    position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
    background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.12);
    padding:16px;display:none;
  }
  .gnav[data-open="true"]{display:block}
  /* <1024px は STUDIO版と同じ英字ラベル付きメニューに差し替える */
  .gnav__list{display:none}
  .mnav__list{display:block}
  .mnav__list a{display:block;padding:12px;border-bottom:1px solid var(--color-border)}
  .mnav__list li:last-child a{border-bottom:0}
  /* 元サイトは1024px未満で Instagram ボタンとお問い合わせピルを隠し、
     ハンバーガーだけにしている（実測） */
  .header-actions{display:none}

  .point__grid{grid-template-columns:1fr;gap:48px}
  .point__card{max-width:520px;margin-inline:auto}
  .service__row,.service__row--reverse .service__figure{grid-template-columns:1fr;order:0}
  /* PC用の行ごとの位置指定（nth-child）を打ち消す */
  .service__row:nth-child(1),.service__row:nth-child(2),.service__row:nth-child(3){
    grid-template-columns:1fr;column-gap:0;margin-left:0;
  }
  .service__row{gap:32px}
  .service__figure img{width:100%;max-width:378px}
  .flow{width:auto}
  .photo-pair{padding:0}
  .service__figure img{width:100%}
  .service__desc{max-width:none}
  .value-grid{grid-template-columns:1fr;gap:40px}
  .card-grid{grid-template-columns:1fr;gap:48px}
  .property-grid{grid-template-columns:1fr}
  .photo-pair{grid-template-columns:1fr}
  .site-footer__top{flex-direction:column;align-items:flex-start;gap:24px}
}

@media (max-width:767px){
  .hero-home{
    height:auto;aspect-ratio:1/1;
    background-image:url("assets/img/hero-home-sp.webp");background-size:cover;
  }
  .hero-home__actions{
    position:static;padding:24px 20px 0;justify-content:center;flex-wrap:wrap;
  }
  .btn-outline{min-width:140px;height:48px;font-size:15px}
  .intro{padding-top:48px}
  .intro__title{font-size:22px}
  .intro__body{margin-top:32px;font-size:16px;line-height:2}
  .point,.service,.area,.promise{padding-top:80px}
  .point__cols{grid-template-columns:1fr;gap:40px}
  .point__photo{margin-top:20px}
  .area__track{animation-duration:30s}
  .area__item{flex-basis:280px}
  .area__item img{width:280px;height:210px}
  @keyframes area-marquee{from{transform:translateX(0)}to{transform:translateX(-1077px)}}
  .page-hero{min-height:420px;padding:72px 20px}
  .sub-section{padding:56px 0}
  .flow__body{padding-left:20px}
  .promise__card{padding:24px}
  .research-embed__frame{height:1500px}
  .cta{padding:72px 0}
  /* ヘッダー（元サイト実測・375px: 外枠 padding 4/16・ロゴ238px・高さ72px） */
  .site-header{padding:4px 16px}
  .site-header__inner{gap:8px;padding:0 16px 0 32px;min-height:72px}
  .site-header__logo img{width:238px}
  .nav-toggle{width:48px;height:48px}
  .card-grid{grid-template-columns:1fr}
}

/* ============================================================
   Phase B（WordPress）で使う物件まわり
   Phase A の静的HTMLでは未使用。theme/ 側でのみ描画される。
   ============================================================ */
.property-card{border:1px solid var(--color-border);border-radius:12px;overflow:hidden;background:#fff}
.property-card__link{display:block;height:100%}
.property-card__link:hover{background:var(--color-bg-sub2)}
.property-card__thumb{width:100%;height:220px;object-fit:cover;background:var(--color-border)}
.property-card__thumb--empty{display:block}
.property-card__body{padding:20px;font-family:var(--font-sub)}
.property-card__badge{
  display:inline-block;margin-right:8px;padding:2px 10px;border-radius:var(--radius-pill);
  background:var(--color-main);color:#fff;font-size:12px;font-weight:700;
}
.property-card__type{font-size:13px;color:var(--color-ink-mute)}
.property-card__title{margin-top:8px;font-size:16px;font-weight:700;line-height:1.5;color:var(--color-ink-deep)}
.property-card__price{margin-top:8px;font-size:20px;font-weight:700;color:var(--color-main)}
.property-card__row{
  margin-top:6px;display:flex;align-items:flex-start;gap:6px;
  font-size:14px;line-height:1.6;color:var(--color-ink-body);
}
.property-card__row .mi{font-size:18px;flex:0 0 auto;color:var(--color-ink-mute)}

.property-count{margin:24px 0 16px;font-family:var(--font-sub);font-size:14px;color:var(--color-ink-body)}
.property-more{margin-top:48px;text-align:center}
.property-more .btn-primary{margin-top:0}

.property-filter{
  margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
  padding:20px;border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-bg-sub);font-family:var(--font-sub);
}
.property-filter__field{display:grid;gap:6px;font-size:14px;color:var(--color-ink-body)}
.property-filter__field select{
  min-width:200px;height:44px;padding:0 12px;
  border:1px solid var(--color-border);border-radius:6px;background:#fff;font:inherit;
}
.property-filter__submit{
  height:44px;padding:0 24px;border-radius:6px;background:var(--color-main);
  color:#fff;font-size:15px;font-weight:700;
}
.property-filter__submit:hover{background:#9a8845}

.property-single{padding:80px 0;font-family:var(--font-sub)}
.property-single__eyebrow{font-size:14px;color:var(--color-ink-mute)}
.property-single__title{margin-top:8px;font-size:24px;font-weight:700;line-height:1.5;color:var(--color-ink-deep)}
.property-single__price{margin-top:12px;font-size:28px;font-weight:700;color:var(--color-main)}
.property-single__gallery{
  margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
}
.property-single__gallery img{width:100%;height:260px;object-fit:cover;border-radius:var(--radius)}
.property-single__pr{margin-top:28px;font-size:16px;line-height:1.9;color:var(--color-ink-body)}
.property-table{margin-top:32px;width:100%;border-collapse:collapse;font-size:15px}
.property-table th,.property-table td{
  padding:14px 16px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top;
}
.property-table th{width:160px;font-weight:700;color:var(--color-ink-deep);background:var(--color-bg-sub)}
.property-table td{color:var(--color-ink-body)}
.property-single__source{margin-top:32px}
.property-single__back{margin-top:40px;font-size:15px}
.property-single__back a:hover{text-decoration:underline}

.pagination{margin-top:48px;text-align:center;font-family:var(--font-sub)}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;margin:0 4px;padding:0 10px;border-radius:6px;
  border:1px solid var(--color-border);color:var(--color-ink-body);
}
.pagination .page-numbers.current{background:var(--color-main);border-color:var(--color-main);color:#fff}
.pagination a.page-numbers:hover{background:var(--color-bg-sub2)}

.entry-body{margin-top:32px;font-size:16px;line-height:1.9;color:var(--color-ink-body)}
.entry-body h2{margin-top:2em;font-size:20px;font-weight:700;color:var(--color-ink-deep)}
.entry-body h3{margin-top:1.6em;font-size:17px;font-weight:700;color:var(--color-ink-deep)}
.entry-body p + p{margin-top:1em}
.entry-body ul{margin-top:1em;padding-left:1.4em;list-style:disc}

@media (max-width:767px){
  .property-card__thumb{height:180px}
  .property-filter__field select{min-width:0;width:100%}
  .property-filter__field{flex:1 1 100%}
  .property-single{padding:56px 0}
  .property-table th{width:110px;padding:12px}
  .property-table td{padding:12px}
}
/* --- Notion連携で追加（写真準備中プレースホルダ・価格応談 など） --- */
.property-card__thumb--empty{
  display:grid;place-items:center;height:220px;
  background:repeating-linear-gradient(45deg,var(--color-bg-sub),var(--color-bg-sub) 10px,var(--color-border) 10px,var(--color-border) 20px);
  color:var(--color-ink-mute);font-family:var(--font-sub);font-size:14px;letter-spacing:.05em;
}
.property-card__price--ask{color:var(--color-ink-mute);font-size:16px}
.property-single__gallery .property-card__thumb--empty{height:260px;border-radius:var(--radius)}
.property-single__cta{margin-top:40px}
.property-single__cta .btn-primary{margin-top:0}
@media (max-width:767px){
  .property-card__thumb--empty{height:180px}
}