/* ==========================================================================
   すまいカルテ（架空）— シニア向け住宅検索ポータル

   ⛔ 読者は入居する本人ではなく「探している家族」。40〜60代を想定して
      本文16px以上・行間1.8・補助文に薄いグレーを使わない（型 Phase 3）。
   ⛔ 見出しは明朝、キッカーは英字でなくひらがな（A=ゴシック900/英字、
      C=極太ゴシック/Trebuchet と3種を作り分けている）。
   ⛔ 角丸は使わない（2026-08-27 Junya指示）。階層はボーダーと色で作る。
   ========================================================================== */
:root{
  --bg:#ffffff;
  --cream:#faf7f2;       /* 生成り地（ink 15.18:1） */
  --ink:#23201c;         /* 白地 16.22:1 */
  --muted:#6b625a;       /* 白地 5.97:1 / 生成り地 5.58:1 */
  --green:#0e6e5c;       /* 白抜き 6.17:1 */
  --green-p:#e8f4f0;     /* 淡緑（文字 5.47:1） */
  --cta:#b64d05;         /* 白抜き 5.18:1（#ff6900 を沈めた値） */
  --line:#ddd6cc;
  --line-s:#ece6dd;
  --card:#ffffff;
  --t1:#0e6e5c; --t2:#1f5b8f; --t3:#7a4b12; --t4:#6b3576;   /* 種別4色 */
  --shadow:0 1px 2px rgba(35,32,28,.06), 0 10px 24px rgba(35,32,28,.10);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px; line-height:1.8; padding-bottom:56px;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--green); transition:color .2s ease, opacity .2s ease}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 24px}

/* 見出しは明朝＋ひらがなキッカー（⛔英字キッカーは使わない） */
h1,h2,h3{
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  font-weight:700; line-height:1.5; margin:0; letter-spacing:.02em;
}
h1{font-size:32px} h2{font-size:28px} h3{font-size:20px}
@media (max-width:767px){ h1{font-size:24px} h2{font-size:20px} }
.kicker{font-size:14px; font-weight:700; color:var(--green); margin:0 0 8px}
.lead{font-size:18px; color:var(--muted); margin:16px 0 0}
p{margin:16px 0 0}
.small{font-size:14px; color:var(--muted)}
.num{font-family:Georgia,"Times New Roman",serif; font-variant-numeric:tabular-nums}

/* --- ヘッダ（検討リストのバッジつき） -------------------------------------- */
.hd{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.hd__in{display:flex; align-items:center; gap:16px; min-height:64px}
.logo{display:flex; align-items:center; gap:8px; font-weight:700; font-size:20px; color:var(--ink); text-decoration:none;
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; transition:opacity .2s ease}
.logo:hover{opacity:.75}
.logo svg{width:28px; height:28px; flex:0 0 auto}
.gnav{margin-left:auto; display:flex; gap:8px; align-items:center}
.gnav a{
  padding:8px 12px; font-size:16px; font-weight:700; color:var(--ink); text-decoration:none;
  border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.gnav a:hover{color:var(--green); border-bottom-color:var(--green)}
.gnav a[aria-current="page"]{color:var(--green); border-bottom-color:var(--green)}
.keep{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:6px; font-size:14px; font-weight:700;
  border:1px solid var(--line); color:var(--ink); text-decoration:none;
  transition:border-color .2s ease, color .2s ease;
}
.keep:hover{border-color:var(--green); color:var(--green)}
.keep b{background:var(--green); color:#fff; padding:0 8px; font-size:12px}
@media (max-width:767px){ .gnav a{display:none} }

/* --- FV -------------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; color:#fff}
.pic{position:absolute; inset:0; overflow:hidden}
.pic img{width:100%; height:100%; object-fit:cover}
.veil{position:absolute; inset:0}
/* ⛔濃さは合成後の実測で決める（_check_sc_veil.py） */
.veil--l{background:linear-gradient(90deg, rgba(28,42,38,.94) 0%, rgba(28,42,38,.88) 56%, rgba(28,42,38,.45) 100%)}
.hero__in{position:relative; padding:80px 0; max-width:620px}
@media (max-width:899px){ .hero__in{padding:56px 0; max-width:none} }
.hero h1{color:#fff}
.hero .lead{color:#dfe7e4}
.hero .kicker{color:#a8dccf}

/* --- 検索補助（トップの入口） ------------------------------------------------ */
.s-assist{padding:48px 0; background:var(--cream)}
.assist{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
@media (max-width:899px){ .assist{grid-template-columns:1fr} }
.assist a{
  display:block; padding:20px; background:var(--card); border:1px solid var(--line);
  text-decoration:none; color:var(--ink);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.assist a:hover{border-color:var(--green); transform:translateY(-3px); box-shadow:var(--shadow)}
.assist b{display:block; font-size:18px}
.assist span{display:block; font-size:14px; color:var(--muted); margin-top:4px}

/* --- セクション ------------------------------------------------------------- */
.s{padding:64px 0}
.s--cream{background:var(--cream)}

/* --- おすすめ特集（1大2小） ------------------------------------------------- */
/* ⛔ 1大2小。大カードは写真を大きく見せるためのもので、本文量は小カードと同じ。
   align-items:start を付けないと大カードが右列の高さに引き伸ばされ、
   本文の下に大きな空白が残る（2026-08-27 実測。撮って初めて分かる類）。 */
.feat{display:grid; grid-template-columns:2fr 1fr; gap:24px; margin-top:32px; align-items:start}
@media (max-width:899px){ .feat{grid-template-columns:1fr} }
.feat__sub{display:grid; gap:24px}
/* 大カードは写真を主役にする＝写真を大きく、本文は同じ密度で */
.feat > .fc .fc__pic img{aspect-ratio:3/2}

/* --- 施設カード -------------------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
@media (max-width:899px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .cards{grid-template-columns:1fr} }
.fc{
  background:var(--card); border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fc:hover{border-color:var(--green); transform:translateY(-3px); box-shadow:var(--shadow)}
.fc__pic{position:relative; overflow:hidden}
.fc__pic img{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .4s ease}
.fc:hover .fc__pic img{transform:scale(1.04)}
.fc__vac{
  position:absolute; left:0; top:0; padding:4px 12px; font-size:12px; font-weight:700; color:#fff;
  background:var(--green);
}
.fc__vac--no{background:#6b625a}
.fc__b{padding:16px; display:flex; flex-direction:column; flex:1}
.fc__type{display:inline-block; padding:2px 8px; font-size:12px; font-weight:700; color:#fff; align-self:flex-start}
.t1{background:var(--t1)} .t2{background:var(--t2)} .t3{background:var(--t3)} .t4{background:var(--t4)}
.fc h3{font-size:18px; margin-top:8px}
.fc h3 a{color:var(--ink); text-decoration:none}
.fc:hover h3 a{color:var(--green)}
.fc__area{font-size:14px; color:var(--muted); margin-top:4px}
.fc__cost{margin-top:12px; padding-top:12px; border-top:1px solid var(--line-s); font-size:14px}
.fc__cost b{font-family:Georgia,"Times New Roman",serif; font-size:20px; font-variant-numeric:tabular-nums}
.fc__tags{margin-top:8px; font-size:12px; color:var(--muted)}
.fc__keep{
  margin-top:12px; padding:8px; border-radius:6px; font-size:14px; font-weight:700; width:100%;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.fc__keep:hover{border-color:var(--cta); color:var(--cta)}
.fc__keep[aria-pressed="true"]{background:var(--cta); color:#fff; border-color:var(--cta)}

/* --- 絞り込み ---------------------------------------------------------------- */
.list{display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:start}
@media (max-width:899px){ .list{grid-template-columns:1fr} }
/* ⛔ JSが動いたときだけ出す。無効なら24件がそのまま並ぶ（壊さない） */
.filter{display:none}
.js .filter{display:block; border:1px solid var(--line); background:var(--card); padding:20px}
.filter h2{font-size:18px}
.fg{margin-top:20px; padding-top:20px; border-top:1px solid var(--line-s)}
.fg:first-of-type{border-top:0; padding-top:0}
.fg legend,.fg > b{display:block; font-size:14px; font-weight:700; margin-bottom:8px}
.fg label{display:flex; gap:8px; align-items:flex-start; font-size:16px; padding:4px 0; cursor:pointer}
.fg input{margin-top:6px; flex:0 0 auto; accent-color:var(--green)}
.filter__reset{
  margin-top:20px; width:100%; padding:12px; border-radius:6px; font-size:14px; font-weight:700;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.filter__reset:hover{border-color:var(--cta); color:var(--cta)}
.bar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line)}
.bar__n{font-size:18px; font-weight:700}
.bar__n b{font-family:Georgia,"Times New Roman",serif; font-size:28px; color:var(--green)}
.sort{margin-left:auto}
.js .sort{display:block}
.sort select{padding:8px 12px; font-size:16px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit}
.empty{display:none; padding:48px 24px; text-align:center; border:1px solid var(--line); background:var(--cream); margin-top:24px}
.empty h3{font-size:20px}
.empty button{
  margin-top:16px; padding:12px 24px; border-radius:6px; font-size:16px; font-weight:700;
  border:1px solid var(--cta); background:transparent; color:var(--cta); cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.empty button:hover{background:var(--cta); color:#fff}

/* --- 詳細ページ -------------------------------------------------------------- */
.crumb{font-size:14px; color:var(--muted); padding:16px 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--green)}
.dpic{display:grid; grid-template-columns:2fr 1fr; gap:8px; margin-top:8px}
@media (max-width:767px){ .dpic{grid-template-columns:1fr} }
.dpic__sub{display:grid; gap:8px}
.dpic img{width:100%; object-fit:cover}
.dpic__main img{aspect-ratio:16/9}
.dpic__sub img{aspect-ratio:16/9}
.dgrid{display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; margin-top:32px}
@media (max-width:899px){ .dgrid{grid-template-columns:1fr} }
.tbl{width:100%; border-collapse:collapse; font-size:16px; background:var(--card)}
.tbl th,.tbl td{border:1px solid var(--line-s); padding:12px 16px; text-align:left; vertical-align:top}
.tbl th{background:var(--cream); font-weight:700; width:34%}
.cost{margin:48px 0}
.cost .tbl td{text-align:right; font-family:Georgia,"Times New Roman",serif; font-variant-numeric:tabular-nums; font-weight:700}
.cost .tbl tfoot td,.cost .tbl tfoot th{background:var(--green-p); font-size:18px}
/* 入居条件バー */
.care{display:flex; margin-top:12px; border:1px solid var(--line)}
.care span{flex:1; text-align:center; font-size:12px; padding:8px 2px; border-right:1px solid var(--line)}
.care span:last-child{border-right:0}
.care .on{background:var(--green); color:#fff; font-weight:700}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding:0; list-style:none}
.tags li{border:1px solid var(--green); color:var(--green); font-size:14px; font-weight:700; padding:4px 12px}
.side{border:1px solid var(--line); background:var(--card); padding:20px}
.side .btn{display:block; width:100%; text-align:center; margin-top:12px}
/* ⛔ 2026-08-27 Junya指示: ボーダー（カード・表・メニュー）は角丸なし、ボタンだけ角丸あり。 */
.btn{
  display:inline-block; padding:14px 24px; font-size:16px; font-weight:700; text-decoration:none;
  border:1px solid transparent; border-radius:6px; cursor:pointer; font-family:inherit;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--cta{background:var(--cta); color:#fff}
.btn--cta:hover{background:#8f3d04}
.btn--line{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--line:hover{border-color:var(--green); color:var(--green)}
.faq{margin-top:32px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:16px 0; font-weight:700; list-style:none; transition:color .2s ease}
.faq summary:hover{color:var(--green)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; float:right; color:var(--green)}
.faq details[open] summary::after{content:"－"}
.faq p{margin:0 0 16px; color:var(--muted); font-size:16px}

/* --- 記事 -------------------------------------------------------------------- */
.arts{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:24px}
@media (max-width:767px){ .arts{grid-template-columns:1fr} }
.art{border:1px solid var(--line); background:var(--card); padding:20px; transition:border-color .2s ease, transform .2s ease}
.art:hover{border-color:var(--green); transform:translateY(-3px)}
.art h3 a{color:var(--ink); text-decoration:none}
.body h2{margin-top:40px} .body h3{margin-top:28px}
.body ul{margin-top:12px}

/* --- フッタ・黒帯 ------------------------------------------------------------- */
.ft{background:#1c2a26; color:#c9d6d2; padding:40px 0 24px; margin-top:64px}
.ft a{color:#fff}
.ft a:hover{opacity:.75}
.ft__nav{display:flex; flex-wrap:wrap; gap:20px; font-size:16px; font-weight:700}
.ft__note{margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); font-size:14px; color:#a9b8b3}
.demobar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:#0d1117; color:#fff; font-size:12px; line-height:1.6; padding:8px 16px; text-align:center;
}
.demobar b{color:#ffd479}

/* --- スクロール出現（⛔CSSでは隠さない） -------------------------------------- */
.rv-on .rv{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.rv-on .rv.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .rv-on .rv{opacity:1; transform:none; transition:none} }

/* ==========================================================================
   すまいカルテ sc2 型（2026-10-02）— 参考＝SOMPOケアの作法、形は変える
   採寸メモ＝収益化記事/公開基盤/site_design_ref_sompocare_20261002.md
   ⛔ 赤は使わない（参考の指紋）。緑 #0e6e5c・押すものだけ赤茶 #b64d05・地は生成り
   上の旧CSSは下層の部品の配置のために残し、見た目はここで上書きする
   ========================================================================== */
:root{--green:#0e6e5c;--green-d:#0a5547;--green-p:#e8f4f0;--cta:#b64d05;--cta-d:#8f3d04;--cream:#faf7f2;--ink:#23201c;--muted:#5e564e;--line:#ddd6cc;--line-s:#ebe5dc}
body{font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;font-feature-settings:"palt" 1;word-break:auto-phrase;background:#fff;color:var(--ink)}
.sc-flag{background:#12171c;color:#f2f5f7;font-size:12px;line-height:1.7;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 24px}
.sc-flag b{padding:4px 12px;border-radius:999px;background:#f6c945;color:#221a00;font-weight:700;white-space:nowrap}
.sc-flag span{flex:1 1 16rem}
.sc-flag a{color:#f2f5f7;font-weight:700;text-decoration:underline;white-space:nowrap}
.demobar{display:none}

/* ヘッダー */
.hd{background:#fff;border-bottom:0;box-shadow:0 1px 0 var(--line)}
.hd__in{min-height:76px}
.sc-logo{gap:12px}
.sc-logo__mark{width:36px;height:36px}
.sc-logo span{display:flex;flex-direction:column;font-size:20px;font-weight:900;line-height:1.2}
.sc-logo small{font-size:12px;font-weight:700;color:var(--muted)}
.gnav a{font-size:14px;font-weight:700}
.keep{border-radius:999px;padding:8px 16px}
.keep b{border-radius:999px}

/* 共通の部品（旧部品の角を丸め、ボタンを丸く） */
.fc,.filter,.js .filter,.empty,.tbl,.side,.art,.assist a{border-radius:16px}
.fc{overflow:hidden}
.fc__type{border-radius:999px;padding:2px 12px}
.fc__vac{border-radius:999px;left:12px;top:12px;box-shadow:0 2px 8px rgba(35,32,28,.18)}
/* ★10-02 Junya「左上のラベルの上と右に余白を」: 札が写真の角（上・左とも1px）に貼り付いていた → 角から12pxずつ内側へ */
.fc__keep,.filter__reset,.empty button,.btn{border-radius:999px}
.btn--cta{background:var(--cta);border-color:var(--cta)}
.btn--cta:hover{background:var(--cta-d)}
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 32px;border-radius:999px;font-size:16px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s ease,background-color .2s ease}
.sc-btn:hover,.sc-btn:focus-visible{transform:translateY(-2px)}
.sc-btn--cta{background:var(--cta);color:#fff}
.sc-btn--cta:hover{background:var(--cta-d)}
.sc-btn--line{background:#fff;color:var(--green);border-color:var(--green)}
.sc-btn--line:hover{background:var(--green-p)}
.sc-btn--white{background:#fff;color:var(--green)}
.sc-arrow{width:16px;height:16px;flex:none}
@media (prefers-reduced-motion:reduce){.sc-btn,.sc-entry,.sc-type{transition:none}.sc-btn:hover{transform:none}}


/* ★10-02 Junya「transition」: よくある質問の開け閉めに動きを付ける。
   ::details-content と interpolate-size（対応ブラウザ）で高さを動かし、記号は＋→×へ回す。
   ⛔ 未対応のブラウザでは今までどおり動きなしで開く（壊れない）。⛔ 動きを減らす設定では止める */
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){details::details-content{transition:none}}

.faq summary::after{content:"＋";display:inline-block;transition:transform .3s ease}
.faq details[open] summary::after{content:"＋";transform:rotate(45deg)}
/* 下層の手当て（10-02 プレビューで見えたもの） */
.fg{border:0;border-top:1px solid var(--line-s);padding:20px 0 0;margin:20px 0 0;min-width:0}
.fg:first-of-type{border-top:0;padding-top:0;margin-top:16px}
.dgrid h2{margin-top:48px}
.dgrid h2:first-child{margin-top:0}
.dgrid .tags,.dgrid .care{margin-top:16px}
.care span{border-radius:4px}
.dpic img{border-radius:12px}
.dpic{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* ⛔ 旧 2fr 1fr は写真の本来の幅が最小幅になり、360px で 2px はみ出した（10-02） */

/* 節 */
.sc-sec{padding:88px 0}
.sc-h2{font-size:36px;line-height:1.45;font-weight:900;text-align:center}
.sc-h2::after{content:"";display:block;width:48px;height:4px;border-radius:2px;background:var(--green);margin:16px auto 0}
.sc-h2--left{text-align:left}
.sc-h2,.sc-kv__ttl{text-wrap:balance}
/* ⛔「確かめておく／こと」と2文字だけ折れた（10-02）→ 行の長さを揃えて折る */
.sc-h2--left::after{margin-left:0}
.sc-body{margin-top:16px;color:var(--muted)}
.sc-more{margin-top:32px;text-align:center}

/* KV＋検索の箱 */
@keyframes sc-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* ⛔ 写真は KV の外（.sc-top の直下）に置く＝スマホで「見出し→検索→写真」に並べ替えるため（10-02） */
.sc-top{position:relative}
/* ⛔ overflow:clip を付けていたため、いちばん下の検索の箱の影が枠の端で水平に切れた（10-02 Junya「影が突然切れてる」）。写真は枠内に収まるので切り落としは不要 */
.sc-kv{position:relative;min-height:416px;display:flex;align-items:center;background:transparent}
.sc-kv__img{position:absolute;top:0;left:0;width:100%;height:416px;object-fit:cover;object-position:70% 50%}
.sc-kv::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(250,247,242,.96) 0%,rgba(250,247,242,.9) 34%,rgba(250,247,242,0) 62%)}
.sc-kv__in{position:relative;z-index:2;padding:40px 24px 104px}
/* ⛔ 検索のボタンを 1280×600 で 560px 以内に（初版は KV 520＋下余白 112 で 678px＝外れた） */
.sc-kv__kick{font-size:14px;font-weight:700;color:var(--green);animation:sc-up .6s .1s both}
.sc-kv__ttl{margin-top:12px;font-size:48px;line-height:1.4;font-weight:900;color:var(--ink);animation:sc-up .7s .25s both}
.sc-kv__lead{margin-top:16px;max-width:30em;font-size:16px;color:var(--muted);animation:sc-up .7s .4s both}
.sc-search{position:relative;z-index:3;margin-top:-88px;background:#fff;border-radius:24px;box-shadow:0 16px 40px rgba(35,32,28,.12);padding:20px 28px;animation:sc-up .7s .55s both}
.sc-search__form{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}
.sc-search__form label{display:grid;gap:8px;font-size:14px;font-weight:700;min-width:0}
.sc-search__form select,.sort select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;font:inherit;font-size:16px;height:52px;padding:0 48px 0 16px;border:1px solid #8b8278;border-radius:12px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%230e6e5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/16px 16px}
.sort select{width:auto;height:44px;font-size:14px}
.sc-search__form select:focus-visible,.sort select:focus-visible{outline:3px solid rgba(14,110,92,.35);outline-offset:2px}
/* ★10-02 Junya「矢印の位置を右の余白をもう少しとって」: 標準の矢印は右端に詰まる → 自前の矢印を右 16px・文字は右 48px 空ける */
.sc-search__chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
.sc-search__chips span{font-weight:700;color:var(--muted);margin-right:8px}
.sc-search__chips a{padding:4px 16px;border-radius:999px;background:var(--green-p);color:var(--green);font-weight:700;text-decoration:none}
.sc-search__chips a:hover{background:#d3ebe3}
@media (prefers-reduced-motion:reduce){.sc-kv__kick,.sc-kv__ttl,.sc-kv__lead,.sc-search{animation:none}}

.sc-news{margin-top:40px}
.sc-news ul{list-style:none;background:var(--cream);border-radius:16px;padding:16px 28px}
.sc-news li{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:8px 0;font-size:14px}
.sc-news li + li{border-top:1px solid var(--line-s)}
.sc-news time{color:var(--muted)}
.sc-news__tag{padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:700}
.sc-pick{margin-top:40px}

/* はじめての方へ（淡い面＝透かし） */
.sc-first{background:linear-gradient(rgba(250,247,242,.9),rgba(250,247,242,.9)),url(img/sc2-bg-lounge.webp) center/cover}
.sc-first__in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sc-first__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0 64px 0 64px}
.sc-entries{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sc-entry{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:transform .2s ease,border-color .2s ease}
.sc-entry:hover,.sc-entry:focus-visible{border-color:var(--green);transform:translateY(-2px)}
.sc-entry b{font-size:16px;font-weight:900}
.sc-entry span{grid-column:1;font-size:12px;color:var(--muted)}
.sc-entry .sc-arrow{grid-column:2;grid-row:1 / span 2;color:var(--green)}

/* 種別 */
.sc-types{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* ⛔ 1fr だと「サービス付き高齢者向け住宅」が文節で折れず列を押し広げ、360px で横はみ出し 449px（10-02 実測）→ minmax(0,1fr)＋語の途中でも折る */
.sc-type{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.sc-type:hover,.sc-type:focus-visible{transform:translateY(-4px);box-shadow:0 12px 24px rgba(35,32,28,.1)}
.sc-ic{width:40px;height:40px;color:var(--green)}
.sc-type b{font-size:18px;font-weight:900;line-height:1.5;overflow-wrap:anywhere}
.sc-type span{font-size:14px;color:var(--muted);flex:1}
.sc-type em{font-style:normal;display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--green);border-top:1px solid var(--line-s);padding-top:12px}

/* できること（淡い面＝透かし） */
.sc-why{background:linear-gradient(rgba(250,247,242,.88),rgba(250,247,242,.88)),url(img/sc2-bg-garden.webp) center/cover}
.sc-why__box{margin-top:40px;background:#fff;border-radius:24px;padding:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;box-shadow:0 8px 24px rgba(35,32,28,.06)}
.sc-why__card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.sc-why__card h3{margin-top:16px;font-size:18px;font-weight:900}
.sc-why__card p{margin-top:8px;font-size:14px;color:var(--muted)}

/* エリア */
.sc-areas{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sc-areas__list{list-style:none;margin-top:28px;display:grid;gap:12px}
.sc-areas__list a{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink)}
.sc-areas__list a:hover{border-color:var(--green)}
.sc-areas__list b{font-size:18px;font-weight:900}
.sc-areas__list span{margin-left:auto;color:var(--green);font-weight:700}
.sc-map{width:100%;height:auto}
.sc-map path{stroke:#fff;stroke-width:4;transition:opacity .2s ease}
.sc-map a:hover path{opacity:.8}
.sc-map__a{fill:#cfe6dd}.sc-map__b{fill:#e8f4f0}.sc-map__c{fill:#f3e3d4}
.sc-map text{font-size:16px;font-weight:700;fill:var(--ink);text-anchor:middle}

/* 記事への誘い */
.sc-story{background:var(--cream)}
.sc-story__in{display:grid;grid-template-columns:3fr 2fr;align-items:center}
.sc-story__in img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px}
.sc-story__box{background:#fff;border-radius:24px;padding:40px;margin-left:-64px;box-shadow:0 12px 32px rgba(35,32,28,.08)}
.sc-story__box .sc-btn{margin-top:24px}

.sc-cta{background:var(--green);color:#fff;padding:56px 0}
.sc-cta__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sc-cta p{font-size:20px;font-weight:700}

.sc-ft{background:#2b2620;color:#e9e3da;margin-top:0}
body{padding-bottom:0}
main > :last-child:not(.sc-cta){margin-bottom:64px}
/* ★10-02 Junya「この上下の白余白いらないかも」: 旧CSSの .ft{margin-top:64px} と、画面下に固定していた旧デモ帯のための body{padding-bottom:56px} が残っていた。
   トップは緑の帯から直接フッターへ。下層は本文の終わりにだけ余白を残す（本文がフッターにくっつかないように） */
.sc-ft__brand{font-size:20px;font-weight:900;display:flex;flex-direction:column;color:#fff}
.sc-ft__brand small{font-size:12px;font-weight:400;color:#cbc2b6}
.sc-ft .ft__nav a,.sc-ft__back{color:#fff}
.sc-ft__back{display:inline-block;margin-top:12px;font-size:12px}

@media (max-width:899px){
  .gnav{display:none}
  .sc-types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-first__in,.sc-areas,.sc-story__in{grid-template-columns:1fr;gap:32px}
  .sc-story__box{margin:-48px 16px 0}
  .sc-why__box{grid-template-columns:1fr}
}
@media (max-width:767px){
  .dpic{grid-template-columns:minmax(0,1fr)}
  .sc-sec{padding:64px 0}
  .sc-h2{font-size:28px}
  .hd__in{min-height:64px}
  .sc-logo small{display:none}
  .sc-top{display:flex;flex-direction:column;background:var(--cream)}
  .sc-kv{order:1;min-height:0;display:block}
  .sc-search{order:2}
  .sc-kv__img{order:3;position:relative;height:200px}
  .sc-kv::before{display:none}
  .sc-kv__in{padding:16px 16px 16px}
  .sc-kv__ttl{font-size:28px}
  .sc-kv__lead{font-size:14px}
  .sc-search{margin:0 16px 24px;width:auto;padding:16px;border-radius:16px}
  .sc-search__form{grid-template-columns:1fr 1fr;gap:12px}
  .sc-search__form .sc-btn{grid-column:1 / -1}
  .sc-search__form select{height:48px}
  .sc-search__form .sc-btn{width:100%}
  .sc-news ul{padding:12px 16px}
  .sc-entries{grid-template-columns:1fr}
  .sc-types{gap:12px}
  .sc-type{padding:16px}
  .sc-type span{font-size:12px}
  .sc-why__box{padding:20px}
  .sc-story__box{padding:24px}
  .sc-cta p{font-size:18px}
}