*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em}.demo a{text-decoration:underline;margin-left:10px}.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}.skip:focus{top:8px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.reveal{opacity:0;transform:translateY(25px);transition:.8s}.reveal.seen{opacity:1;transform:none}:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}@media(max-width:720px){.demo{max-width:calc(100vw - 20px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}:root{--bg:#f5f3ec;--ink:#111;--body:"Noto Sans JP",sans-serif;--display:"Archivo Black",sans-serif;--teal:#0d8f84}.sumika-head{height:99px;position:sticky;top:0;z-index:20;display:flex;align-items:center;padding:0 3vw;background:#050505;color:#fff}.sumika-head>a{font:30px var(--display)}.sumika-head button{background:var(--teal);border:0;padding:14px 20px}.life-hero{height:630px;position:relative}.life-hero img{filter:saturate(.75)}.life-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0008,transparent 60%)}.life-hero>div{position:absolute;z-index:2;left:4vw;bottom:7vh;color:#fff}.life-hero h1{font-size:clamp(55px,7vw,100px);line-height:.95;letter-spacing:-.06em}.life-hero>span{position:absolute;z-index:2;right:25px;bottom:25px;color:#fff}.life-grid{padding:14vh 3vw;display:grid;grid-template-columns:1fr 1fr;gap:20px}.life-grid header{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr}.life-grid h2,.areas h2,.find h2{font:clamp(56px,7vw,100px)/1 var(--display);letter-spacing:-.05em}.life-grid article{position:relative;aspect-ratio:2/3;overflow:hidden}.life-grid article:nth-of-type(even){margin-top:130px}.life-grid article img{transition:.7s;object-position:50% 28%}.life-grid article:hover img{transform:scale(1.04);filter:grayscale(1)}.life-grid article>div{position:absolute;inset:auto 15px 15px;background:#fff;padding:20px}.life-grid h3{font-size:28px}.areas{padding:12vh 5vw;background:#111;color:#fff}.areas ol{list-style:none;padding:0}.areas li{display:grid;grid-template-columns:120px 1fr auto;padding:28px 0;border-top:1px solid}.areas li b{font-size:30px}.find{padding:15vh 5vw;background:var(--teal);color:white}.find a{display:inline-block;border:1px solid;padding:16px 22px}footer{padding:28px;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}@media(max-width:720px){.sumika-head{height:50px}.life-hero{height:270px}.life-hero h1{font-size:38px}.life-grid{grid-template-columns:1fr;padding:90px 15px}.life-grid header{grid-column:1;grid-template-columns:1fr}.life-grid article,.life-grid article:nth-of-type(even){aspect-ratio:2/3;margin:0}.areas li{grid-template-columns:70px 1fr}.areas li em{grid-column:2}.find h2{font-size:52px}footer{grid-template-columns:1fr;gap:8px}}
/*HEADFIX-20260811*/.sumika-head{justify-content:space-between;gap:16px}.sumika-head>*{min-width:0}.sumika-head button,.sumika-head>a:last-child{flex:0 0 auto;white-space:nowrap}/*/HEADFIX-20260811*/

/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
  対象 = **実測で 2 行以上に折り返し、行間が 1.06 未満、かつ日本語を含む**見出しだけ。
  日本語は文字が全角の枠いっぱいなので 1.00 = 行と行が接する。1.00〜1.05 は実質接している。
  1.06 以上は既に隙間が見えており標準域なので触らない(= 空けすぎない)。
  欧文だけの見出しも触らない(枠いっぱいという理屈が当てはまらず、実測で他の部品と重なった)。
  セレクタは実際に描画された要素から機械で取った全長パス。共有 shared-quality.css が
  site.css の**後**に読まれて `!important` で勝つため、短いセレクタでは当たらない。
  生成 = apply_heading_leading_20260811.py / 確認 = scan_all_headings_20260811.cjs --tag after
  0.95 → 1.25 / 2行 / 家より先に、暮らす人を見る。
  1.00 → 1.25 / 5行 / どんな部屋か。その前に、どんな毎日か。
  1.00 → 1.25 / 2行 / 街から探す。
  1.00 → 1.25 / 3行 / 条件では言えない希望を、聞かせてください。
*/
html body div#main main section.life-hero div h1{line-height:1.25!important}
html body div#main main section#lives.life-grid header h2{line-height:1.25!important}
html body div#main main section#areas.areas h2{line-height:1.25!important}
html body div#main main section#find.find h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/

/*SUMIKA-BRUSHUP-20260820 ── オーナー指摘への対応 + 全体のブラッシュアップ

  ★① ヘッダー直下の黒い部分が長すぎる(オーナー指摘 2026-08-20 逐語)
  原因を実測: `.life-hero` の height は 835px で、img は object-fit:cover により
  ボックス全体を正しく埋めていた(構造上のギャップは無い)。原因は**写真ファイルそのもの**
  だった。17-realty-lifestyle.webp(1717×916)の上から約25%(0〜225px)が完全な黒
  (PILで明るさ実測: y=0〜220 は 0.0〜0.1、y=225 から急激に立ち上がり y=230 で 79.0)。
  コラージュ生成時に焼き込まれた無地の余白と判断した。
  是正 = 黒帯を切り落とした新ファイル 17-realty-lifestyle-v2.webp(1717×691)を作成し、
  `.life-hero` の height も同じ比率(691/916 ≈ 0.754)で 835px → 630px(モバイルは
  359px → 270px)へ縮めた。**高さだけを比率通り縮めた理由**: box の高さと画像の高さを
  同じ係数で縮めれば、object-fit:cover が横方向をどれだけ切り取るか(視野の広さ)が
  元のデザインと完全に同じ値のまま保たれる(実測: 縮小前後とも可視幅の割合 ≈ 0.808 で一致)。
  height だけ変えて幅の切り取り量を変えなかったので、4人の被写体の見え方は変わっていない。

  ★② 「美しい町並み」「小川のせせらぎ」の無限ループ映像セクション(オーナー指摘)
  Pexels(無料・商用可・帰属表示不要のライセンス)から実際に全コマ目視して選定:
  - 街並み: 37420657「tranquil narrow street in traditional japanese town」(5秒)
  - 小川: 38863867「tranquil stream flowing over rocks in forest」(8秒)
  1本のmp4に事前合成した(街→1秒クロスフェード→小川→<video loop>のネイティブ再生で
  小川の終わりから街の頭へ戻る)。JSで交互切替する方式ではなく1ファイルに焼いた理由=
  2つの<video>をJSで同期させると、読み込み遅延やタブのスロットリングでずれる事故が
  起きやすいため、動画ファイル自体をシームレスに再生する方が壊れにくい。
  ループの継ぎ目(小川の最後→街の頭)は素のカット。街と小川はどちらも落ち着いた色調・
  静止カメラのため、カットで繋いでも違和感は小さいと判断した(オーナー確認が必要な点)。
  1280×720 / CRF30 / 11秒 / 3.3MB。音声トラックは自動再生の要件上ミュート必須のため削除。

  ★その他のブラッシュアップ(オーナー指示「経験・知見を元に雰囲気に合わせて」)
  - ヒーロー写真にゆっくりした呼吸のような拡大を追加(静止画のままだった)。
  - NEW LIVES の4枚・街から探すの3行・映像セクション・CTA に、他ページで実績のある
    scroll-reveal(このページの site.js に既にIntersectionObserverの土台があったが
    .reveal クラスがどこにも使われていなかった)を適用。
  - 「街から探す」の行に触れたときの反応(触れる前は完全に無反応だった)を追加。
  ══════════════════════════════════════════════════════════════════ */

/* ── ヒーロー: ゆっくり呼吸する拡大(このページは静止画のままだった) ── */
.life-hero img{animation:sumikaBreath 16s ease-in-out infinite alternate}
@keyframes sumikaBreath{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ── scroll-reveal の段差(同じ親の中の順番で少しずつ遅らせる) ── */
.life-grid article.reveal:nth-of-type(2){transition-delay:.08s}
.life-grid article.reveal:nth-of-type(3){transition-delay:.16s}
.life-grid article.reveal:nth-of-type(4){transition-delay:.24s}
.areas li.reveal:nth-child(2){transition-delay:.08s}
.areas li.reveal:nth-child(3){transition-delay:.16s}

/* ── 街から探す: 触れると分かるようにする(2026-08-20 追加。以前はホバーが0個だった) ── */
.areas li{transition:background .3s ease,padding-left .3s cubic-bezier(.2,.7,.3,1)}
.areas li:hover{background:#1a1a1a;padding-left:14px}
.areas li b{transition:color .3s ease}
.areas li:hover b{color:var(--teal)}
.areas li em{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.areas li:hover em{transform:translateX(6px)}

/* ── 映像セクション: 街並みと小川が横幅いっぱいに流れる ── */
.life-scenery{position:relative;height:70vh;min-height:440px;max-height:680px;overflow:hidden;background:#111}
.life-scenery video{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.life-scenery::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0007 0%,transparent 45%)}
.life-scenery-copy{position:absolute;z-index:2;left:4vw;bottom:6vh;color:#fff}
.life-scenery-copy p{margin:0 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.life-scenery-copy h2{margin:0;max-width:14ch;font:clamp(32px,4.4vw,58px)/1.15 var(--display);letter-spacing:-.04em}

@media(max-width:720px){
  .life-scenery{height:48vh;min-height:320px;max-height:520px}
  .life-scenery-copy{left:20px;bottom:26px}
  .life-scenery-copy h2{font-size:30px}
  .areas li:hover{padding-left:0}
}
/*/SUMIKA-BRUSHUP-20260820*/